className javascript синтаксис примеры

Подробно о className в javascript

1. Что такое "className в javascript" синтаксис
2. Как получить имя/название/значение класса из тега?
3. Как очистить имя/название/значение класса из тега?
4. Стенд очищения значения класса из тега className.

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



Что такое "className в javascript" синтаксис

"ClassName в javascript" - это свойство в javascript, которое отвечает за все содержание атрибута class.

Если в атрибуте class-а будет несколько классов, то обратиться по отдельности с помощью "classname " не получится!


ClassName оперирует всем содержимым атрибута class-а.

Синтаксис свойства className

element . className;

Как переводится className?

className - переводится - как " имя класса"

Что делает "className в javascript"?

className в javascript может:

Создать/установить класс.

Получить "имя/значение" класса.

Очистить "имя/значение" класса.

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



Как получить имя/название/значение класса из тега?

Для того, чтобы получить имя/значение класса вам понадобится:

Html:

Используем div с произвольным текстом и добавим ему id:

<div id=its_id class=example>Пример получения значения className</div>

javascript

В кнопку поместим onclick + alert.

Внутри alert используем один из способов обратиться к тегу, добавляем точку и пишем className.

<button onclick="alert(its_id .className)">button</button>

Соберем весь код получения имени/значения className:

Код получения значения class c помощью className

В приведенном коде нас интересует выделенным красным наш класс:

<div id=its_id class=example>Пример получения значения className</div>
<button onclick="alert(its_id .className)">Получи значение класса</button>


Пример получения значения class c помощью className

Далее выведем приведенный выше код прямо здесь.

Чтобы получить значение класса с помощью className нажмите по кнопке "Получи значение класса"

Пример получения значения className
Получи значение класса
Скопировать ссылку



Как очистить значение класса из тега(className)?

Для очищения значения класса из тега, можно использовать "className".

Для иллюстрации заголовка вам понадобится:

Html:

Опять возьмем div с произвольным текстом и добавим ему id:

<div id=i_id class=example_2>Очистка значения класса с помощью className</div>

javascript

Добавим данному классу ... ну, пусть это будет цвет текста красный

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

В кнопку поместим onclick + alert.

Внутри alert используем один из способов обратиться к тегу, добавляем точку и пишем className, далее "равно"(=) и две одинарные кавычки.

<button onclick="i_id .className=''">Очисти класс с помощью className</button>

Соберем весь код очистки значения класса className:

Код примера очистки значения класса в теге(className).

<div id=i_id class=example_2>Очистка значения класса с помощью className</div>

<button onclick="i_id .className=''">Очисти класс с помощью className</button>

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

Живой пример очистки значения класса в теге(className).

Как видим... наш текст покрашен в красный.

Если мы очистим значение класса, то цвет должен пропасть.

Чтобы очистить значение класса, нажмите по кнопке "Очисти класс с помощью className"

Очистка значения класса с помощью className
Очисти класс с помощью className
Скопировать ссылку



Стенд очищения значения класса из тега className.

Выше вы увидели код + работу "примера очистки значения класса в теге(className).", теперь создам стенд, на котором будет приведен этот самый пример, но только в коде, что именно происходит, когда вы нажали кнопку: Очисти класс с помощью className

Пример работы свойства className с единичным классом.

Для того, чтобы увидеть процесс работы className нажмите на кнопку "Очисти класс с помощью className"

<div id=i_id class="example_2">Очистка значения класса с помощью className</div>
Очисти класс с помощью className

Стенд №2 очищения значения класса из тега className.

С единичным классом вы разобрались, а как дело обстоит, когда в классе два, три, и более имен классов?

Соорудим аналогичный стенд:

Пример работы свойства className с несколькими классами.

Для того, чтобы увидеть процесс работы className, когда в class-е сразу несколько имен - нажмите на кнопку "Очисти имена классов с помощью className"

<div id=i_id class="example_2 example_3 example_4">Очистка значения класса с помощью className</div>
Очисти имена классов с помощью className

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

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

---