Добавление значения в атрибут "class"

Подробно о "classList.add()"

1. Что такое "classList.add()"/синтаксис
2. Пример работы "classList.add()"

Скопировать ссылку



Что такое classList.add()"/синтаксис

Начнем с определения - "Что такое classList.add()"

1). "ClassList.add()" - это один из методов свойства classList.
2). "ClassList.add()" - добавляет значение в атрибут class.


Синтаксис classList.add()"

element.classList.addкласс;

Разберем синтаксис classList.add()"

element - тег/объект.

classList - название свойства.

класс - атрибут класс-а.

Стенд для понимания работы classList.add()"

Для понимания работы "classList.add()" - сделаю простой и понятный стенд.
Для того, чтобы увидеть работу "classList.add()" нажмите кнопку "Пример работы classList.add()"

<div id="example" class="example_1"></div>
Пример работы "classList.add()"
Скопировать ссылку



Пример работы "classList.add()"

На реальном примере работы, всегда легче понять, как это работает!

Для того, чтобы сделать реальный пример работы свойства "classList" с методом "add" вам понадобится:

Какой-то тег, пусть это будет div, в открывающий тег поместим id(для того, чтобы одним из способов обратиться к тегу) + class

<div id="example" class="example_1"></div>

Чтобы пример был живой - добавим кнопку(button) + при нажатии на неё сработает onclick и запустит функцию "foo1()"

<button onclick="foo1()">Пример работы "classList.add()"</button>

javascript

В теге script помещаем нашу функцию.

Обращаемся к тегу по его id с помощью getElementById:

var elem = document.getElementById('example');

Добавляем новое значение в атрибут "class":

elem .classList.add('example_2');

Css:

Чтобы вы могли увидеть добавление значения "example_2", создадим стили:

<style>.example_2{color:red}</style>

Соберем весь код:

Код добавления значения с помощью "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()"

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---