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，您可以了解更多有关Java语言中“ this”的信息。 And here's where，您可以了解有关NodeLists的更多信息。

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

如何使用JavaScript从HTML元素添加和删除类

1 个答案: