| | | | | |
Javascript добавить класс
2019/01/02
Марат
447
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.
Может быть следующая тема… изменения класса при клике!?
С вашими куками, что-то не то..., попробуете перезагрузить страницу..
Теги:
js добавить класс js добавить класс элементу добавить класс через js js добавить класс активному javascript добавить класс javascript добавить класс к элементу