如何使用 javascript 更改 css 类属性？

Question

有人可以告诉我如何通过 javascript 更改 css 类属性吗？例子：

.winner
{
    background-color: white;
}

如何更改类优胜者背景颜色的值。当我写： var some = document.querySelector("winner"); 我得到与班级优胜者的按钮。我想要这个类不是 html 的元素。我怎么才能得到它？

Answer 1

有几种方法可以做到这一点：

在 .css 文件中的当前类之上，您可以在其中添加另一个类，然后只需将 HTML 元素切换为属于该新类。您需要遍历具有该类名的所有元素并将它们更改为新名称：

CSS：

.winner
{
    background-color: white;
}

.winnerBlue
{
    background-color: blue;
}

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");

Answer 2

实现此目的的方法是删除应用的类或应用覆盖第一个类的另一个类。DOM ElementclassList属性是关键。

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