如何使用 JavaScript 從 HTML 元素中添加和刪除類

Question

我的任務是修改 test.js 代碼，以便它可以切換樣式。 這意味着當用戶第二次點擊按鈕時，它應該恢復到更改前的原始狀態。

這將要求您在 JavaScript 中使用條件語句，它們與您在 Java 中使用的條件語句非常相似。

如何使用 JavaScript 從 HTML 元素中添加和刪除類？

到目前為止，我能夠在我的按鈕上進行點擊，這是我的代碼

我試過了

var element = document.getElementById("h1");

if (element.classList) { 
   element.classList.toggle("title-button");
} else {

   var classes = element.className.split(" ");
   var i = classes.indexOf("title-button");

   if (i >= 0) 
     classes.splice(i, 1);
   else 
     classes.push("title-button");
     element.className = classes.join(" "); 
}

但它沒有用

這是只需單擊一下即可工作的內容：

var buttonElement  = document.getElementById("title-button");

var elementsArray = document.getElementsByTagName("h1");
var element = elementsArray[0];
buttonElement.addEventListener("click", function(){
    element.classList.add("bordered-text");
    element.style.color = "yellow";

});

單擊“更改標題”按鈕應該使用戶能夠添加或刪除我一直在使用的樣式。 “title button”應該變成“Alter button”，所以當用戶點擊標題時，樣式應該改變。

Answer 1

當您使用 getElementsByTagName() 時， 您將返回一個 NodeList，因此您必須遍歷它以正確添加事件偵聽器：

let titles = document.getElementsByTagName("h1"); 

for (i=0; i<titles.length; i++){

  titles[i].addEventListener("click", function(){

    if(this.className === "title-button"){
      this.className = "alter-title";
    }else{
      this.className="title-button";
    }

  })

}

這是一個CodePen，您可以在其中看到操作中的切換。

您可以在此處了解有關 Javascript 中“this”的更多信息。 您可以在此處了解有關 NodeList 的更多信息。

但是，我建議您考慮針對 h1 標簽的長期影響。 只要確保頁面上永遠不會有您不想受到切換影響的 h1 標簽，因為您將事件偵聽器添加到所有 h1 標簽。 如果可能存在您不希望 h1 標簽受到影響的情況，請考慮為這些元素使用一個特殊的類，並通過以這種方式選擇它們來向它們添加事件偵聽器。