有人知道如何在点击时更改整个文档的CSS文件吗？我一直在搜索，但只找到了一些关于设置类/ ID的CSS的结果，而不是整个文档。我的网站有两个主题，亮/暗，我想从两个链接加载“light.css”或“dark.css”。
感谢。
答案 0 :(得分：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。
答案 1 :(得分：1)
您需要更改链接标记的src，它控制样式。例如，你可能在头标记中有这个：
<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属性。我现在更新它是正确的。
答案 2 :(得分：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。
答案 3 :(得分：0)
有两种方法可以立刻想到。
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>