Question

我已经在我的_layout.cshtml页面上找到了这个：

@Styles.Render("~/Content/css")

这指向包含应用程序所有样式的css文件。

我想在其中创建另一个具有不同样式的css文件，并在视图中放置一个组合框，单选按钮等，以便用户可以选择＆＃34;样式A＆＃34;或＆＃34;样式B＆＃34;，与用户偏好一样。

想象一下组合框：

<select>
    <option value="default">Default Theme</option>
    <option value="light">Light Theme</option>
    <option value="dark">Dark Theme</option>
    <option value="silver">Silver Theme</option>
</select>

ComboBox

用户将选择主题，应用程序将指向不同的样式表。

修改

好的，我现在有两张样式表：site.css和dark.css。在App_Start文件夹中，我已经找到了这些内容：

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
bundles.Add(new StyleBundle("~/Content/css/dark").Include("~/Content/dark.css"));

应用程序的结果风格是两个样式表的混合！我不想要那个，我希望能够在一个和另一个之间切换。

有可能吗？

Answer 1

我不是cshtml的专家，但是如果你可以加载jQuery，我会尝试这样的事情：

<select id="styleSelect" onchange=changeStyle()>
    <option value="default">Default Theme</option>
    <option value="light">Light Theme</option>
    <option value="dark">Dark Theme</option>
    <option value="silver">Silver Theme</option>
</select>

然后在<head>部分

中加入此脚本

<script>
function changeStyle(){
    if($( "#styleSelect" ).val()=="default"){
        $('link[href="oldstylesheet.css"]').attr('href','default.css');
    }
    if($( "#styleSelect" ).val()=="light"){
        $('link[href="oldstylesheet.css"]').attr('href','light.css');
    }
    if($( "#styleSelect" ).val()=="dark"){
        $('link[href="oldstylesheet.css"]').attr('href','dark.css');
    }
    if($( "#styleSelect" ).val()=="silver"){
        $('link[href="oldstylesheet.css"]').attr('href','silver.css');
    }
}
</script>

访问不同的CSS文件

1 个答案: