DWWEB.RU
СКРИПТЫ

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

2019/01/02 Марат 539 0 JS |

Давайте разберемся, как можно изменить класс в 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.

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

Не забудь !
Оставить комментарийCOMMENTS+
Сообщений пока нет - Вы можете стать первым
BBcode
нажмите, чтобы загрузить аватар
Загрузить свой аватар(max ширина, высота = 100px) ( как это работает)

Закрыть
+ =
Подписаться
Теги:
js добавить класс js добавить класс элементу добавить класс через js js добавить класс активному javascript добавить класс javascript добавить класс к элементу

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2019