如何使用JavaScript更改CSS类属性？

Question

有人能告诉我如何通过JavaScript更改CSS类属性吗？

例如：

.winner
{
    background-color: white;
}

我该如何更改class为winner的背景颜色值？ 当我写下以下代码时： var some = document.querySelector("winner"); 我获得了class为winner的按钮元素，但我想获取这个class而非它所属的html元素。该如何实现？

- Dawid G

---

你的意思是你真的想改变这个规则吗？ - epascarello

你正在寻找CSSOM。 - SLaks

https://dev59.com/4nM_5IYBdhLWcg3wXx1N - epascarello

你可以使用Element.style更改元素的样式；不要试图更改样式表中的规则。 - Obsidian Age

为什么要改变样式类的定义，而不是创建另一个类来定义替代样式，然后只需更改对象的类属性？ - user4843530

Answer 1

你可以通过以下几种方式进行操作：

在你的 .css 文件中为当前的类添加另一个类，然后将 HTML 元素切换到该新类。你需要循环遍历所有使用该类名的元素，并将它们更改为新名称：

CSS:

.winner
{
    background-color: white;
}

.winnerBlue
{
    background-color: blue;
}

JavaScript:

JavaScript：

var winnerClassElements = document.getElementsByClassName("winner");
for(var i = 0; i < winnerClassElements.length; i++)
{
    document.getElementById(winnerClassElements.item(i)).className = "winnerBlue";
}

你也可以使用这段 JavaScript 代码在你的 HTML 文件中添加一些样式元素：

var editCSS = document.createElement('style')
editCSS.innerHTML = ".winner {background-color: blue;}";
document.body.appendChild(editCSS);

---

我知道你没有要求使用jQuery，但如果你已经引入了它，这是一个非常简单的解决方案：

$('.winner').css("background-color" , "blue");

- JCollier

---

我提供这个选项是因为有时候提问者已经包含了jQuery，而且他们通常不知道该要求什么，特别是对于那些刚接触一门语言的人来说。如果他们知道该要求什么，在很多情况下，我敢打赌他们会在问题标签中包含jQuery。 - JCollier

如果您想提供一个使用未标记的东西的解决方案，那么它应该是一条注释。请保持您的答案与主题相关。 - Scott Marcus

Answer 2

实现这一点的方法是删除应用的类或应用覆盖第一个类的另一个类。DOM元素的classList属性是关键。

document.querySelector("input").addEventListener("click", function(){
  document.querySelector("h1").classList.remove("normal");
  document.querySelector("h1").classList.add("special");  
});

.normal { background-color:purple; }
.special { background-color:yellow; }

<h1 class="normal">Just some text</h1>
<input type="button" value="Click to change style">

- Scott Marcus