javascript - 我如何使用条件语句来切换标题的颜色？

Question

按钮应从原始(黑色)切换为黄色并恢复原状。我的问题是将其还原。在 if-else 语句中，只有 else 语句有效。我已经尝试过 switch 语句但是那不起作用html

var buttonElement = document.getElementById("title-button"); 
   var elementbutton = buttonElement;
   var elementsArray = document.getElementsByTagName("h1");
   var element = elementsArray[0];

   elementbutton.addEventListener( "click", function(){
       if(elementbutton.hasOwnProperty("yellow")){
       element.remove("yellow");
       element.classList.remove("bordered-text");
       element.style.add = "black";
   } else {
       element.style.color = "yellow";
       element.classList.add("bordered-text");
   }
});

.bordered-text{
   border-style: solid;
   border-color: black;
}

<button id="title-button">Alters title</button>
<h1>Header 1</h1>

Answer 1

您正在单击的按钮没有任何名为 yellow 的属性，因此 elementbutton.hasOwnProperty("yellow") 始终计算为 false，因此 else block 始终在执行。

您应该检查 h1 的 element.style.color，而不是检查被点击按钮的 hasOwnProperty:

var buttonElement = document.getElementById("title-button"); 
 var elementbutton = buttonElement;
 var elementsArray = document.getElementsByTagName("h1");
 var element = elementsArray[0];

 elementbutton.addEventListener( "click", function(){
   if(element.style.color == "yellow"){
       element.style.color = "black";
       element.classList.remove("bordered-text");
   } else {
       element.style.color = "yellow";
       element.classList.add("bordered-text");
   }
 });

.bordered-text{
   border-style: solid;
   border-color: black;
}

<button id="title-button">Alters title</button>
<h1>Header 1</h1>