javascript - 已更改类的背景颜色属性不起作用

标签 javascript html css

这可能是一个愚蠢的问题,但我在互联网上搜索过,甚至在 Stack Overflow 上搜索过,但我无法理解这个问题。代码非常基础:

HTML:

<!DOCTYPE html>
<html lang="en-US">
    <head>
        <title>DOCUMENT OBJECT MODEL</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="css.css">
    </head>
    <body>
        <ul>
            <li class="sameClass" style="background-color:black; color:white; margin:5px; ">ONE</li>
            <li class="sameClass" style="background-color:black; color:white; margin:5px ">TWO</li>
            <li class="sameClass" style="background-color:orange; color:red; margin:5px">THREE</li>
            <li class="sameClass" style="background-color:orange; color:red; margin:5px">FOUR & FIVE</li>
        </ul>
        <div id="getValues"></div>
        <script src="javascript.js"></script>
    </body>
</html>

CSS:

li.differentClass{
    background-color:orange;
}

JS:

var element = document.querySelector("li.sameClass");
element.className = "differentClass";

现在,脚本更改了第一个列表项的类名,这是可以理解的。并且在样式表中,类名为“differentClass”的列表项的外观将发生变化。例如,在 CSS 中,我这样写:

li.differentClass{
    border:solid 5px pink;
}

这没有任何问题。但是,看看我的原始代码。类名为“differentClass”的列表项应将其背景色更改为橙​​色。但这是行不通的。不仅如此,像“颜色”这样的属性也没有改变。

问题是什么?

最佳答案

改用这个:

li.differentClass{
background-color:orange !important;
}

我建议阅读此书:css-tricks

关于javascript - 已更改类的背景颜色属性不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33130516/

相关文章:

php - 使用javascript动态计算总和

html - 元视口(viewport)问题

html - 如何去除图像两边的空白区域?

javascript - Switch 语句的行为不正常

javascript - 按 Enter 键时禁止在 &lt;textarea&gt; 中换行 [html、javascript]

javascript - 回调函数未执行

javascript - 使用 JavaScript 输入数字的格式

css - 我的 DIV 宽度没有随着它的 child 的大小而扩大

html - 正确设置一类div的CSS样式

javascript - 如何在不向上滚动的情况下在视口(viewport)中显示文本?