ГЛАВНАЯ | HTML | CSS | PHP | JS | ЕЩЁ

Javascript добавить класс

Давайте разберемся, как можно изменить класс в javascript – на самом деле это очень просто! И разберем добавление класса на примерах.

Как добавить класс к существующему классу.

1.

Чтобы добавить класс к нашему, уже существующему классу - нам понадобится див(div) – например такой:

Здесь текст, который покрашен по уморочанию в красный

Код дива:

<div class="example" >Здесь текст, который покрашен по уморочанию в красный</div>

Класс дива:

<style>.example{color: red;}</style>
2. Как видим по умолчанию в первом пункте ничего не изменилось и не должно было измениться. Поскольку ни нового стиля, ни скрипта, ни идентификатора(id) – ничего нет!

Давайте изменим эту ситуацию!

Добавим класс, который и будем добавлять в наш див - add_style{color: green;}

Получим:

<style>.example{color: red;} .example.add_style{color: green;}</style>
Добавим идентификатор id="change"

Получим:

<div class="example" id="change">Здесь текст, который изменен на другой цвет с помощью добавления класса через js(javascript)</div>

И теперь напишем скриптик на js

<script type="text/javascript">var element = document.getElementById("change"); element.classList.add("add_style");</script>

Результат:

Здесь текст, который изменен на другой цвет с помощью добавления класса через js(javascript)

Код результата:

<div class="example add_style" id="change">Здесь текст, который изменен на другой цвет с помощью добавления класса через js(javascript)</div>

Процесс: 1. Для понимания процесса используйте : console.log (element);
2. Или alert : alert(element);
3. var element : переменные
4. document.getElementById("change"); : document.getElementById
5. element.classList.add("add_style"); : Добавление класса к id.

Может быть следующая тема… изменения класса при клике!?

Написать комментарий.
С вашими куками, что-то не то..., попробуете перезагрузить страницу..