Question

<!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元素的背景颜色。所以有任何解决方案可以在这里应用以在两秒钟内更改背景颜色。我也知道，如果我们添加另一个类来切换背景颜色。另一个解决方案将不胜感激。

Answer 1

它的失败是因为ID的重量超过了CLASS的重量：

id = 100
class，pseudo-class = 10
元素，伪元素= 1

您可以在课堂上使用id：

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

然后从红色切换到绿色。不需要使用！important。

此外，如果您想通过动画更改它，可以使用jQuery animate backgroundColor

Answer 2

<强>原因

问题是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”和类“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

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


为什么我的易碎摇滚CSS不工作INTERROBANG

（使用！重要规则）

好的，现在正在运作


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

在某些情况下，!important 可能是正确的选择，但它永远不应该是这样的问题的快速解决方案，因为最终你会和你一起一个很难维护的CSS，各种!important会相互咬合。只有在你真正想到它的时候才使用它。

Answer 3

<!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>

Answer 4

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

Answer 5

将 CSS 更改为

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

<强> DEMO

Answer 6

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>

Answer 7

你可以在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;
}

Answer 8

按照以下

更改您的绿色课程

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

或尝试

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

改变div的类

8 个答案: