Question

我的问题是我的页面中有几个div。都有类似颜色的标题。现在，如果我必须更改所有div的颜色（例如背景颜色），我必须更改尽可能多的div。是不是只能改变或者说在一个地方写颜色代码（比如在变量中），然后将该变量作为嵌入式样式中的颜色值用于所有这些div。类似javascript实体的东西。

Answer 1

你可以写一些css和jquery来实现这个

.color1
{
   color:red;
   background-color:green;
}

.color2
{
   color:blue;
   background-color:orange;
}

现在在某些事件上你可以改变课程。例如，你有

<div class="header color1">SOME TEXT HERE</div>
<div class="header color1">another header</div>

你可以用jquery甚至用javascript来改变它：）

$("#somebutton").live("click", function(){
    $(".header").removeClass('color1');
    $(".header").addClass('color2');

});

这会在点击id为somebutton

的按钮时改变两个标题的颜色

Answer 2

如何在所有div上设置相同的类并设置所有常用颜色？这样你只需改变那个类的颜色。

Answer 3

如果您需要CSS中的变量，您可能需要查看CSS预编译器^{（这是正确的术语吗？）}，例如Sass，它执行此服务器端并且减轻了在多个规则集中重复出现许多不同颜色的痛苦。

否则，在开发时，请尝试将CSS文件拆分为单独的组件，例如typography.css，color.css等，以帮助更好地组织它们。在完成开发以获得更好的性能之后，您仍然希望将它们组合在一起，但这样做确实有助于保持整洁和整洁。

最后，您可以随时定义大型规则：

#header, #footer, #nav, #sidebar {
    color: orange; /* I like orange! */
}

这会在一定程度上减少冗余。使用Javascript进行样式和演示只应作为最后的手段;有始终工具可以保持你的CSS整洁;你只需要使用它们。

Answer 4

我建议使用jQuery或其他javascript库来执行此操作。

将一个类分配给您想要更改的div，然后使用以下代码（当给它们一个'header-div'的clas时）

$('.header-div').('background-color','#FF0000');

这将使用'header-div'

类改变所有元素

Answer 5

Jquery解决方案

使用特定类（如

）定义所有div

<div class="changeable"></div>

然后使用jquery更改背景

$(".change").click(function() {
    $(".changeable").css("background","#000");
});