点击时设置整个页面的css？答案

【问题标题】：Set entire page's css on click?点击时设置整个页面的css？
【发布时间】：2013-07-18 11:47:11
【问题描述】：

有谁知道如何在点击时更改整个文档的 CSS 文件？我四处搜索，但只找到了一些关于设置类/ID 的 CSS 的结果，而不是整个文档。我的网站有两个主题，浅色/深色，我想从两个链接加载“light.css”或“dark.css”。

谢谢。

【问题讨论】：

【解决方案1】：

是的，您可以使用主题。但是CSS的变化仅限于<body>标签。

$("a.theme").click(function(){
    $("body").addClass("dark");
});

我使用了jQuery 库来简化编码。并且切换 CSS 不是一个好主意，您可以更改类。

演示

您可以在jsBin查看工作演示。

查看此答案了解更多详情：Selecting a web page look and feel without reloading, with one CSS。

【讨论】：

这涉及重写我的整个网站和 css 文件......我只需要一个 css 文件切换器
@Windbrand 你们支持哪些浏览器？由于安全问题，所有浏览器的某些版本实际上都否认了这一点。 :)

【解决方案2】：

您需要更改控制样式的链接标签的 src。例如，你的 head 标签中可能有这个：

<link rel="stylesheet" href="light.css">

当你点击某个东西时，你需要将链接标签的 href 属性更改为“dark.css”。你可以这样做：

document.getElementById('id-of-element').addEventListener('click',function(){
    document.getElementsByTagName('link')[0].setAttribute('href',isDark?'light.css':'dark.css');
    isDark=isDark?false:true;
}

重要提示：您需要在此代码之前将 isDark 设置为 false 或 true，具体取决于页面在开始时应该是深色还是浅色。您还需要将id-of-element 更改为应单击以切换页面状态的元素的ID。

我认为这比其他答案更好，因为它更简单并且不使用 jquery。

编辑：我之前不小心使用了 src 属性而不是 href 属性。我现在更新它是正确的。

【讨论】：

【解决方案3】：

试试这样的：

<a href="#" id="light">Light</a>
<a href="#" id="dark">Dark</a>
<script type="text/javascript" charset="utf-8">
    $('a#light, a#dark').click(function(){
        $('style').remove();
        $.ajax({
            url:'http://www.example.com/' + $this.attr('id') + '.css',
            success:function(data){
                $('<style></style>').appendTo('head').html(data);
            }
        })
    })
</script>

当然，你需要先加载jQuery。

【讨论】：

【解决方案4】：

有两种方法立即浮现在脑海。

1) 在页面头部添加样式标签，确保样式标签有唯一的id。然后，您可以设置该元素的 innerHTML。（有点乱）

2) 在页面头部添加一个链接标签，同时确保它具有唯一的 id。您设置 type='text/css' 和 rel='stylesheet' 属性。您将此链接元素的 src 设置为适当的 css 文件。

以下是每种类型的示例。只需为 theme3() 和 theme4() 函数提供 css 文件。

示例：

<!DOCTYPE html>
<html>
<head>
<script>
function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function toggleClass(element, newStr)
{
    index=element.className.indexOf(newStr);
    if ( index == -1)
        element.className += ' '+newStr;
    else
    {
        if (index != 0)
            newStr = ' '+newStr;
        element.className = element.className.replace(newStr, '');
    }
}
function forEachNode(nodeList, func)
{
    var i, n = nodeList.length;
    for (i=0; i<n; i++)
    {
        func(nodeList[i], i, nodeList);
    }
}

window.addEventListener('load', mInit, false);

function mInit()
{
    var style = newEl('style');
    style.setAttribute('id', 'dynCss');
    document.head.appendChild(style);

    var style2 = newEl('link');
    style2.setAttribute('type', 'text/css');
    style2.setAttribute('rel', 'stylesheet');
    style2.setAttribute('id', 'dynCss2');
    document.head.appendChild(style2);
}

function theme1()
{
    var style = byId('dynCss');
    style.innerHTML = "h1{color: red;}";

    var style2 = byId('dynCss2');
    style2.setAttribute('href', '');
}

function theme2()
{
    var style = byId('dynCss');
    style.innerHTML = "h1{color: blue;}";

    var style2 = byId('dynCss2');
    style2.setAttribute('href', '');
}

function theme3()
{
    var style = byId('dynCss');
    style.innerHTML = "";

    var style2 = byId('dynCss2');
    style2.setAttribute('href', 'style3.css');
}

function theme4()
{
    var style = byId('dynCss');
    style.innerHTML = "";
    var style2 = byId('dynCss2');
    style2.setAttribute('href', 'style4.css');
}
</script>
<style>
</style>
</head>
<body>
    <h1>This is the heading</h1>
    <input type='button' onclick='theme1();' value='Theme 1'/>
    <input type='button' onclick='theme2();' value='Theme 2'/>

    <input type='button' onclick='theme3();' value='Theme 3'/>
    <input type='button' onclick='theme4();' value='Theme 4'/>
</body>
</html>

【讨论】：