2

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

谢谢。

4

4 回答 4

1

您需要更改控制样式的链接标签的 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 属性。我现在更新它是正确的。

于 2013-03-25T02:49:06.567 回答
1

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

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

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

演示

您可以查看jsBin中的工作演示。

查看此答案以获取更多详细信息：使用一个 CSS 选择网页外观而不重新加载。

于 2013-03-25T01:36:05.250 回答
0

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

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>
于 2013-03-25T12:51:13.783 回答
0

尝试这样的事情：

<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。

于 2013-03-25T02:00:12.823 回答