更改 div 的类答案

【问题标题】：Changing the class of a div更改 div 的类
【发布时间】：2014-12-25 07:14:26
【问题描述】：

<!doctype html>
<html>
<head>
<style>       
#sample{
    width:100px;
    height:100px;
    background-color:red;
}
.green {    
    background-color:green;    
}
</style>
</head>
<body>
     <div id="sample" ></div>
</body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
  window.setTimeout(function(){
        $('#sample').addClass("green");
  }, 2000);

</script>
<html>

我想在 2 秒内将 id="sample" 的 div 的背景颜色从红色更改为绿色。我添加了 javasript 以在 2 秒后向 div 添加一个具有绿色背景的类。但是添加的类无法替换 div 元素的背景颜色。所以有什么解决方案可以在这里应用以在两秒钟内更改背景颜色。我也知道这是可能的，如果我们添加另一个类来在背景颜色之间切换。另一个解决方案将不胜感激。

【问题讨论】：

尝试给予！对绿色类的背景颜色很重要，例如：背景颜色：绿色！重要；

标签： javascript jquery html css

【解决方案1】：

失败是因为ID的权重大于CLASS的权重：

id = 100
类，伪 class= 10
元素，伪元素 = 1

您可以将 id 与类一起使用：

<body>
     <div id="sample" class="red"></div>
</body>

然后从红色切换到绿色。无需使用 !important。

另外，如果你想用动画改变它，你可以使用jQuery animate backgroundColor

【讨论】：

终于有人知道权重，而不仅仅是建议!important。我以为世界都疯了。
我也想 +1 GolezTrol。我的两个想法：!important 和按 id 选择应该尽可能避免，它们大大增加了 CSS 的复杂性并增加了太多的权重。

【解决方案2】：

<!doctype html>
<html>
<head>
<style>
       #sample{
                width:100px; 
                height:100px;
                /*Remove this from here*/
                /*background-color:red;*/
               }

        .green{ 
               background-color:green;
               }
        .red{ 
              /*Create a class for red alone*/

               background-color:red;
            }               

</style>
</head>
<body>
     <div id="sample" class="red" ></div>
</body>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
        window.setTimeout(function(){

        // Calling removeClass with no parameters will remove all of the items's classes.
        $('#sample').removeClass();
        // Now add the class of green
        $('#sample').addClass("green");
        }, 2000);

</script>
<html>

【讨论】：

【解决方案3】：

原因

问题在于 id 样式比类样式更重要（具有更多“权重”），因此 #sample 的优先级高于 .green 并且 div 保持红色。有许多规则规定哪些 CSS 规则优先于其他规则。请务必阅读有关CSS rule Precedence 的信息，这样无论您选择哪种解决方案，您都知道选择它的原因以及后果。

修复

有很多方法可以解决这个问题，但它们都归结为确保绿色规则优先于（与默认的红色规则同等或更重要）。

解决方案（最佳）：类的样式，而不是 ID。

向 div 添加一个类，指示它是什么类型的框：

<div id="sample" class="samplecontainer"></div>

现在，在 CSS 中，您可以轻松地为此类元素应用默认样式，也可以将其否决：

.samplecontainer {
  background-color: red;
}

.samplecontainer.valid,
/* Or just */
.valid
{
   background-color: green;
}

现在 CSS 不再依赖于特定元素，而是依赖于元素定义。您可以说容器默认为红色，当它们变为“有效”时变为绿色（无论在此示例中可能意味着什么）。这样一来，您就不必依赖 CSS 中的 id，这可以防止非常庞大的 CSS 和您遇到的不受欢迎的否决。

请注意，我将“green”重命名为“valid”以使其更具语义化。如果您也想更改边框，或者将它们设为蓝色而不是绿色怎么办？然后，您仍然需要深入研究 JavaScript 代码，还需要更改 CSS 中的类名称以及可能在 HTML 和 PHP 中固定的样式名称。或者你可以只为蓝色元素保留类名“绿色”，这也很混乱。因此，描述类型或状态的名称（如有效、活动或任何最适合您的名称）更易于阅读和维护。

解决方案（次优）：也将 Id 添加到绿色规则中

尝试像这样更改 css，因此指示具有 id 'sample' 和 class 'valid' 的元素应该是绿色的。我认为这是一种快速修复，与前一种相比不太理想，如果你有很多可以变成绿色的元素，你的 CSS 可能会变得笨重。

#sample.valid{
  background-color: green;
}

解决方案（差）：通过 JavaScript 添加内联样式

除了通过 JavaScript 添加类，您还可以添加内联样式。内联样式（style 属性）具有更高的优先级，因此添加 style="background-color: green" 将覆盖 CSS 中定义的颜色。

$('#sample').css('background-color', 'green');

我不太喜欢这种方法，因为您必须在 JavaScript 中挖掘才能更改样式，最终当您还想更改其他属性时，它会变得非常笨拙。上述每个解决方案都比这个解决方案更可取。

解决方案（穷且有风险）：添加!important

来自CSSTricks: When Using !important is The Right Choice

不幸的典型用例是这样的：

为什么我的 FRAGGLE ROCKING CSS 不工作 INTERROBANG

（使用 !important 规则）

好的，现在可以使用了

然后下一个家伙出现并试图做出新的改变。他试图改变一些现有的 CSS 规则，但现在他的变化没有表现出应有的表现......

在某些情况下!important可能是正确的选择，但它绝不应该是解决此类问题的快速解决方案，因为最终你会使用 CSS这很难维护，各种!importants 会互相咬。仅在您认真考虑后才使用它。

【讨论】：

【解决方案4】：

将 CSS 更改为

.green{    
 background-color:green !important;
}

DEMO

【讨论】：

【解决方案5】：

Please try this one and remove #simple style css
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>

        window.setTimeout(function(){
        $('#sample').css({'background-color':'green'});
        }, 2000);   


</script>

【讨论】：

【解决方案6】：

在 JavaScript 中你可以这样使用你可以找到demo

var a;

function function_name() {
    a = 1;
    setInterval(new_function, 1000);
}

function new_function() {
    if (a === 1) {
        color = "requred_color";
        a = 2;
    } else {
        color = "another_color";
        a = 1;
    }

    document.body.style.background = color;
}

【讨论】：

【解决方案7】：

.green{ 
       background-color:green !important;
}

【讨论】：

【解决方案8】：

像下面这样改变你的绿色课程

.green{ 
         background-color:green !important;
 }

或者试试

$('#sample').css({background-color:"green"});

【讨论】：