Добавление значения в атрибут "class"
Подробно о "classList.add()"
Что такое classList.add()"/синтаксис
Начнем с определения - "Что такое classList.add()"2). "ClassList.add()" - добавляет значение в атрибут class.
Синтаксис classList.add()"
element.classList.addкласс;
Разберем синтаксис classList.add()"
Стенд для понимания работы classList.add()"
Для понимания работы "classList.add()" - сделаю простой и понятный стенд.Для того, чтобы увидеть работу "classList.add()" нажмите кнопку "Пример работы classList.add()"
Пример работы "classList.add()"
На реальном примере работы, всегда легче понять, как это работает!
Для того, чтобы сделать реальный пример работы свойства "classList" с методом "add" вам понадобится:
Какой-то тег, пусть это будет div, в открывающий тег поместим id(для того, чтобы одним из способов обратиться к тегу) + class
Чтобы пример был живой - добавим кнопку(button) + при нажатии на неё сработает onclick и запустит функцию "foo1()"
В теге script помещаем нашу функцию.
Обращаемся к тегу по его id с помощью getElementById:
Добавляем новое значение в атрибут "class":
Чтобы вы могли увидеть добавление значения "example_2", создадим стили:
Соберем весь код:
Код добавления значения с помощью "classList.add()"
Html:
<div id="example" class="example_1">Здесь текст</div>
<button onclick="foo1()">Пример работы "<strong>classList.add()</strong>"</button>
javascript
<script>
function foo1(){
var elem = document.getElementById('example');
elem .classList.add('example_2');
}
</script>
Css:
<style>.example_2{color:red}</style>
Пример работы кода добавления значения с помощью "classList.add()"
Разместим прямо здесь выведенный выше код!
Для того, чтобы увидеть работу "classList.add()" нажмите по кнопке "Пример работы classList.add()";classlist add
js classlist add
classlist add несколько значений
javascript classlist add
classlist add active
element classlist add
document body classlist add
classlist add не работает
js classlist add несколько значение

подробнее.
подробнее.
подробнее.
подробнее.
подробнее.