Question

这可能是一个愚蠢的问题，但我在互联网上搜索它，甚至在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";

现在，脚本更改了第一个列表项的className，这是可以理解的。在样式表中，列出具有className＆＃34; differentClass＆＃34;的项目。将改变它的外观。例如，在CSS中，我写了这样的东西：

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

这没有任何问题。但是，看看我的原始代码。具有className＆＃34; differentClass＆＃34;的列表项应将其背景颜色更改为橙色。但那不起作用。不仅如此，还有＆＃34; color＆＃34;等属性。也没有改变。

有什么问题？

Answer 1

请改用：

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

我建议您阅读：css-tricks

Answer 2

如果您已使用inline CSS属性然后更改除内联属性之外的任何样式，则可以使用将这些属性添加到元素的类，但用于更改元素的内联属性使用style属性。 / p>

JSFiddle

例如：

element.style.backgroundColor = "red"; // To override inline property

但是为了添加不是由内联css设置的font-size或其他属性，您可以使用class

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

//JS
element.className = "differentClass"; // To add property which are not set by inline css

更改的类上的background-color属性不起作用

2 个答案: