javascript - 如何通过在 javascript 中单击按钮来更改 css 类？

Question

我对我在这里做错了什么感到困惑，我正在学习一个教程，它对他们来说很好用，但对我来说却不行。我换了很多东西试图找到问题，但它似乎不起作用。

HTML

<h1 class="settingOne" id="mainText">Simple HTML Page</h1>
    <p class="center">
        This is a very simple HTML page.
    </p>

    <p class="center">It's about as basic as they come. It has: </p>

    <ul class="center">
        <li>An H1 Tag</li>
        <li>Two paragraphs</li>
        <li>An unordered list</li>
    </ul>

    <button id="changeButton">
        <p>
            Hey push this to change the header thing
        </p>
    </button>

CSS

.settingOne {
    font-family: fantasy;
    color: blue;
    text-align: center;
}

.settingTwo {
    font-family: serif;
    color: red;
    text-align: center;
}

JavaScript

function changeClass() {
    document.getElementById("changeButton").onclick = function () {
        if (document.getElementById("mainText").className === "settingOne") {
            document.getElementById("mainText").className = "settingTwo";
        } else {
            document.getElementById("mainText").className === "settingOne";
        }
    };
}

window.onload = function () {
    preparePage();
}

;

Answer 1

在 Javascript 中，行

else { document.getElementById("mainText").className === "settingOne"; }    

应该改为

else { document.getElementById("mainText").className = "settingOne"; }    

单个 = 用于将一件事设置为另一件事，这是您在这里想要的行为。

工作示例:https://jsfiddle.net/w6no44v1/20/