如何切换到引用的类名

Question

我正在尝试用JavaScript切换一个类。 从这个

class=product neutral //background color is grey

到这个

class=product correct //background color is green

if (trueProduct == 12){
        document.getElementById("userAnswer").innerHTML = "class='product correct'";    
        }

HTML

<span id="userAnswer" class="product neutral"></span>

Answer 1

使用classList API，这是最方便的。

var answer = document.getElementById("userAnswer");
answer.classList.remove("neutral");
answer.classList.add("correct");

classList允许您切换或添加或删除特定类，而不会更改任何其他类。

Answer 2

试试这个，

如果您想更改所有类名，可以使用它，

document.getElementById("userAnswer").className = "product correct";

如果您只想添加其他课程，可以使用此

document.getElementById("userAnswer").className += " correct";

在这里阅读.className

Answer 3

您不想更改innerHTML（您的案例中…>和</span>之间的空字符串），但className property：

document.getElementById("userAnswer").className = "product correct";

或者，您可以使用setAttribute：

document.getElementById("userAnswer").setAttribute("class", "product correct");

Answer 4

element.innerHTML是元素的实际内容，您正在寻找的是：

if (trueProduct == 12) {
    document.getElementById("userAnswer").className = "product correct";    
}