Javascript 更改的类上的背景色属性不起作用

这可能是一个愚蠢的问题，但我在互联网上搜索了它，甚至在堆栈溢出上，但我无法理解这个问题。代码非常基本：

HTML:

JS:

现在，脚本更改了第一个列表项的类名，这是可以理解的。在样式表中，类名为“differentClass”的列表项的外观将发生更改。例如，在CSS中，我写了如下内容：

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

这项工作没有任何问题。但是，看看我的原始代码。类名为“differentClass”的列表项的背景色应更改为橙色。但这不起作用。不仅如此，像“颜色”这样的属性也不会改变

有什么问题吗？

请使用此选项：

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

---

我建议您阅读以下内容：

如果您使用了

inline

CSS属性，那么要更改inline属性以外的任何样式，您可以使用类将这些属性添加到元素中，但要更改inline属性，请使用元素的

style

属性

例如：

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

但是要添加字体大小或其他属性，这些不是内联css设置的，您可以使用

class

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

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

---

这可能是因为您没有删除内联样式。内联样式覆盖外部CSS。这可能是

style

标记的问题吗？该类可能正在被重写。链接良好，但请尽量避免使用

！重要信息

，如果可以的话。TylerH在注释中是正确的，您需要避免使用内联样式。@gaynorvader这是唯一一种纯css方式来覆盖内联样式。@Nick Yep，但更好的解决方案是首先不使用内联样式。是的。。。Thnx的提示

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

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

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

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