Ванильный JavaScript, добавляющий классы к элементам [дубликаты]

Я хотел бы использовать чистый JS для добавления классов к некоторым элементам и знаком с выбором элемента с идентификатором, но когда я попытался использовать getElementsByClassName, мой код сломался. Разве нельзя получить элементы по имени класса и добавить новый класс?

Я знаю, что следующий код работает, но, опять же, хотел бы настроить таргетинг на элемент по className.

document.getElementById("id-name").classList.add("new-class");


javascript getelementsbyclassname getelementbyid
person El Coo Cooi    schedule 13.08.2018    source источник
comment
Что вы имеете в виду под моим кодом? Причина этого, вероятно, в том, что getElementsByClassName возвращает список элементов, а не один элемент.   -  person str    schedule 13.08.2018
comment
см.... stackoverflow.com/questions/3808808/   -  person Sean T    schedule 13.08.2018

Ответы (2)


arrow_upward
1
arrow_downward

вы можете использовать querySelectorAll, чтобы выбрать каждый элемент, содержащий ваш класс, а затем добавить новый класс ко всем из них:

document.querySelectorAll('.class-name')
        .forEach(element => element.classList.add('new-class'))
person Vashnak    schedule 13.08.2018
comment
Пожалуйста, не игнорируйте вопрос..... Is it not possible to get elements by class name and add a new class? - person Mamun; 13.08.2018
comment
? Я не понимаю вашу точку зрения, он спрашивает, может ли он получить элементы по имени класса, Итак... Думаю, мой ответ правильный. - person Vashnak; 13.08.2018
comment
Ммм, вижу. Ты прав. Но, кстати, я даю ему более свежее решение, чем getElementByClassname. Что (на мой взгляд) легче читать. - person Vashnak; 13.08.2018

arrow_upward
0
arrow_downward

Разве нельзя получить элементы по имени класса и добавить новый класс?

Это, конечно, возможно. Document.getElementsByClassName() возвращает массивоподобный объект всех дочерних элементов. элементы, которые имеют все заданные имена классов. Вы должны повторить их, чтобы добавить класс:

Использование forEach():

[...document.getElementsByClassName("myClass")].forEach(function(el){
  el.classList.add("new-class");
});
.new-class{
  color: red;
}
<div class="myClass">Test</div>
<div class="myClass">Test 2</div>
<div class="myClass">Test 3</div>

Using for loop: 

var elList = document.getElementsByClassName("myClass");
for(var i=0; i < elList.length; i++){
  elList[i].classList.add("new-class");
}
.new-class{
  color: red;
}
<div class="myClass">Test</div>
<div class="myClass">Test 2</div>
<div class="myClass">Test 3</div>

person Mamun    schedule 13.08.2018