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元素 classList 属性是关键。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何用javascript更改css类属性？

2 个答案: