javascript - 如何使用 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";

});

单击“更改标题”按钮应该使用户能够添加或删除我一直在使用的样式。 “标题按钮”应该变成“更改按钮”，这样当用户单击标题时，样式应该改变。

Answer 1

当您使用 getElementsByTagName() you are getting a NodeList back 时所以你必须循环它才能正确添加事件监听器:

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 where you can see the toggle in action .

Here's where您可以了解有关 Javascript 中“this”的更多信息。 And here's where您可以了解有关 NodeList 的更多信息。

不过，我建议您考虑定位 h1 标记的长期影响。只需确保页面上不会有您不希望受到切换影响的 h1 标记，因为您要将事件监听器添加到所有 h1 标记。如果您不希望 h1 标签受到影响，请考虑为这些元素使用特殊的类，并通过选择它们来向它们添加事件监听器。