Javascript 应用和删除大型CSS样式部分

我想根据用户偏好更改页面样式

页面将以给定的样式加载，但如果用户单击按钮，页面布局将发生更改。如果他再次单击，样式应更改回原始样式。更改很大（大约70行CSS），但只更改了页面的特定部分

我可以编写一个JavaScript函数来修改所有相关标记的CSS样式，但这会很乏味，并且会在代码中引入太多CSS。如果可以的话，我宁愿把它保存在CSS文件中

我还可以将样式

A

添加到CSS文件中，在所有相关标记中参考class

A

，并将样式

B

添加到CSS文件中，在所有相关标记中参考class

B

。然后JavaScript代码只需更改相关标记上的类

---

最好的方法是什么？

您也可以检查类似的内容。单击后，您可以添加/删除指向其他css文件的链接

var ss = document.createElement("link")
ss.type = "text/css"
ss.rel = "stylesheet"
ss.href = "style.css"
document.getElementsByTagName("head")[0].appendChild(ss);

---

要实现这一点，您可以切换

主体上的类（或更相关的父对象），然后根据该类修改CSS。这样，所有UI只受一行JS代码的影响。例如：

$('#foo').click(function() {
    $('body').toggleClass('foobar');
});

。示例{
背景色：红色；
}
body.foobar.example{
背景颜色：蓝色；
}
您可以这样做，无需脚本，只需CSS，非常容易实现，也非常容易在多个布局之间切换


.toggle{
显示：内联块；
填充：3x10px；
边框：1px实心；
背景：#eee；
边缘底部：20px；
}
#切换，#切换2{
显示：无；
}
#切换：选中~label[for=toggle]，
#切换2：选中~label[for=toggle2]{
背景：#aaa；
}
#切换：选中~.container{
显示：无；
}
#切换2:选中~。容器img:最后一个子项{
显示：无；
}

切换
切换2
切换
主体上的类（或更相关的父对象），然后根据该类修改CSS。这样，所有的UI只受一行JS代码的影响。这正是我需要的。请将其添加为您添加的答案。