Здравствуйте! В этом уроке я хотел бы рассказать о том как можно поменять стиль элемента на веб-странице, используя JavaScript. Надо сказать, что в JavaScript для работы со стилями применяются, как правило, 2 подхода:
Свойство style представляет собой, так называемые инлайновые стили, которые будут отображаться у элемента через атрибут style. Для примера давайте зададим цвет шрифта:
var root1 = document.documentElement; // устанавливаем стиль root1.style.color = "red"; // получаем значение стиля document.write(root1.style.color); // red
В данном примере название свойства color совпадает с аналогичным свойством css. По аналогии можно установить цвет с помощью css:
html{ color: red; }
Однако для тех свойств css в названии которых присутствует дефис, например, font-size. В JavaScript для этих свойств дефис удаляется, а первая буква, идущая после дефиса пишется как прописная, то есть в верхнем регистре
var root1 = document.documentElement; root1.style.fontFamily = "Arial";
С помощью такого свойства, как className вы можете установить атрибут class у любого элемента html. Вот пример:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> .redStyle{ color:red; font-family:Arial; } .article{ font-size:22px; } </style> </head> <body> <div class="art"> <h2>Заголовок статьи</h2> <p>Первый абзац</p> <p>Еще абзац</p> </div> <script> var article = document.querySelector("div.art"); // установка нового класса article.className = "redStyle"; // получаем название класса document.write(article.className); </script> </body> </html>
Благодаря классам в css не приходится настраивать каждое отдельное свойство с помощью свойства style.
Но при этом следует учитывать, что предыдущее значение атрибута class будет удалено. Поэтому, если вам нам надо добавить класс, то его следует объединить со старым классом:
article.className = article.className + " blueStyle";
А вот если надо и вовсе удалить все классы, то можно присвоить свойству className пустую строку:
articleDiv.className = "";
Выше мы с вами рассмотрели, как добавлять классы к элементу на веб-странице, но для управления большим количеством классов удобнее использовать другое свойство classList. Это свойство представляет из себя объект, который реализует такие методы:
Пример:
var article = document.querySelector("div.art"); // удаляем класс article.classList.remove("art"); // добавляем класс
Об авторе