应用和移除大型CSS样式部分

Question

我希望根据用户的偏好更改页面样式。

页面将以给定的样式加载，但如果用户点击按钮，则页面布局应更改。如果再次点击，样式应更改回原始样式。更改是大量的（约70个CSS行），但仅更改页面的一个特定部分。

我可以编写JavaScript函数，修改所有相关标签的CSS样式，但这将很繁琐，并且会在我的代码中引入太多的CSS。如果可能的话，我宁愿将其保留在CSS文件中。

我还可以将样式A添加到CSS文件中，并引用所有相关标记中的class A，并将样式B添加到CSS文件中，并引用所有相关标记中的class B。然后JavaScript代码只需更改相关标记上的class即可。

最佳方法是什么？

- summerbulb

---

在body(或更相关的父对象)上切换类，然后修改CSS基于这个类。这样，所有的UI只会受到1行JS代码的影响。 - Rory McCrossan

这正是我所需要的。请将其作为答案添加。 - summerbulb

为您添加了答案。 - Rory McCrossan

Answer 1

为了实现这一点，您可以在 body（或更相关的父对象）上切换类，然后修改 CSS 基于此类。这样，所有 UI 只受到 1 行 JS 代码的影响。例如：

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

.example {
    background-color: red;
}

body.foobar .example {
    background-color: blue;
}

- Rory McCrossan

Answer 2

你可以像这样做，没有脚本，只有CSS，非常易于实现，也非常容易切换多个布局。

.toggle {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid;
  background: #eee;
  margin-bottom: 20px;
}
#toggle, #toggle2 {
  display: none;
}

#toggle:checked ~ label[for=toggle],
#toggle2:checked ~ label[for=toggle2] {
  background: #aaa;
}

#toggle:checked ~ .container {
  display: none;
}

#toggle2:checked ~ .container img:last-child {
  display: none;
}

<input id="toggle" type="checkbox">
<label for="toggle" class="toggle">
  Toggle
</label>
<input id="toggle2" type="checkbox">
<label for="toggle2" class="toggle">
  Toggle 2
</label>

<div class="container">
  
    <img src="http://placehold.it/200x200" alt="">
    <img src="http://placehold.it/200x200" alt="">
    <img src="http://placehold.it/200x200" alt="">

</div>

- Asons

Answer 3

您还可以检查类似于此的内容。点击后，您可以添加/删除到其他CSS文件的链接。

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

- Samot