как добавлять и удалять классы из элементов HTML, используя JavaScript - PullRequest
Новая
       18

как добавлять и удалять классы из элементов HTML, используя JavaScript

0 голосов
/ 26 марта 2019

Моя задача - изменить код test.js, чтобы он переключал стили.Это означает, что когда пользователь нажимает на кнопку второй раз, он должен вернуться к своему первоначальному состоянию, прежде чем он был изменен.

Это потребует от вас использования условных операторов в JavaScript, которые очень похожи нате, что вы использовали в Java.

Как добавлять и удалять классы из элементов HTML с помощью JavaScript?

Мне удалось заставить клик работать на моей кнопке, пока вот мой код

Я пытался 

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";

});

Нажатие кнопки Изменить названиедолжен позволить пользователю добавлять или удалять стили, с которыми я работал.«кнопка заголовка» должна стать «кнопкой изменения», поэтому, когда пользователь нажимает на заголовок, стиль должен измениться.

1 Ответ

0 голосов
/ 26 марта 2019

Когда вы используете 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. И вот где вы можете узнать больше о NodeLists.

Однако я бы порекомендовал вам рассмотреть долгосрочные последствия нацеливания на тег h1. Просто убедитесь, что у вас никогда не будет тегов h1 на странице, на которые вы не хотите, чтобы переключение влияло, потому что вы добавляете прослушиватель событий ко всем тегам h1. Если может быть случай, когда вы не хотите, чтобы теги h1 затрагивались, подумайте об использовании специального класса для этих элементов и добавьте к ним прослушиватели событий, выбрав их таким образом.

...