Javascript 设置整个页面'；什么是点击css？_Javascript_Css_Click_Set_Document

Javascript 设置整个页面'；什么是点击css？

javascript css

Javascript 设置整个页面'；什么是点击css？,javascript,css,click,set,document,Javascript,Css,Click,Set,Document,有人知道我如何在单击时更改整个文档的CSS文件吗？我四处搜索了一下，但只找到了一些关于设置类/ID的CSS的结果，而不是整个文档。我的网站有两个主题，light/dark，我想从两个链接加载“light.css”或“dark.css” 谢谢。是的，你可以使用主题。但是CSS的更改仅限于标记 $("a.theme").click(function(){ $("body").addClass("dark"); }); 我使用了库来

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

谢谢。

是的，你可以使用主题。但是CSS的更改仅限于

标记

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

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

演示您可以在中查看正在运行的演示

查看此答案以了解更多详细信息：。

尝试以下方法：

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

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


$（'a#light，a#dark'）。单击（函数（）{
$（'style'）.remove（）；
$.ajax({
网址：'http://www.example.com/'+$this.attr（'id'）+'.css'，
成功：功能（数据）{
$（''）.appendTo（'head'）.html（数据）；
}
})
})

当然，您需要首先加载jQuery。

您需要更改链接标记的src，它控制样式。例如，您的头标签中可能有以下内容：

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

重要提示：在此代码之前，您需要将isDark设置为false或true，这取决于页面在开始时是暗的还是亮的。您还需要将

id of element

更改为应单击以切换页面状态的元素的id

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

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

有两种方法可以立即想到

1）将样式标记添加到页面头部，确保样式标记具有唯一id。然后可以设置该元素的innerHTML。（有点凌乱）

2）在页面头部添加链接标记，同时确保其具有唯一的id。您可以设置type='text/css'和rel='stylesheet'属性。您可以将这个link元素的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>


函数byId（e）{returndocument.getElementById（e）；}
函数newEl（tag）{returndocument.createElement（tag）；}
函数newText（txt）{return document.createTextNode（txt）；}
函数toggleClass（元素，newStr）
{
index=element.className.indexOf（newStr）；
如果（索引==-1）
element.className+=''+newStr；
其他的
{
如果（索引！=0）
newStr=''+newStr；
element.className=element.className.replace（newStr“”）；
}
}
函数forEachNode（节点列表，func）
{
变量i，n=节点列表长度；
对于（i=0；它涉及重写我的整个网站和css文件…我只需要一个css文件switcher@Windbrand您支持哪些浏览器？由于安全问题，所有浏览器的某些版本实际上都拒绝了这一点。：）