Как поменять стиль элемента через JavaScript

Как поменять стиль элемента через JavaScript

Здравствуйте! В этом уроке я хотел бы рассказать о  том как можно поменять стиль элемента на веб-странице, используя JavaScript.  Надо сказать, что в JavaScript для работы со  стилями  применяются, как правило, 2 подхода:

  • Изменение свойства style
  • Изменение значения класса элемента

как поменять стили через javascript

Свойство style

Свойство 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. Работа с классами в JavaScript.

С помощью такого свойства, как 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. Добавление нового класса к элементу.

Выше мы с вами рассмотрели, как добавлять классы к элементу на веб-странице, но для управления большим количеством классов удобнее использовать другое свойство classList. Это свойство представляет из себя объект, который реализует такие методы:

  • add(className): добавит класс className
  • remove(className): удалит класс className
  • toggle(className): переключит у элемента класс на className. То есть, если класса нет, то он добавится, а если есть, то удалится.
Читайте также  Работа с атрибутами и изменение содержимого HTML-элементов.

Пример:

var article = document.querySelector("div.art");
// удаляем класс
article.classList.remove("art");
// добавляем класс

 

article.classList.add(«redStyle»); // переключаем класс
article.classList.toggle(«art»);

Итоги.

Для того, чтобы задать класс используется метод — className.
Для задания стиля элементу через атрибут style — используется метод style.
Для добавления и удаления класса к элементу используются методы classList.add(className) и classList.remove(className).

Задания

Скругленная кнопка.

Создайте скругленную кнопку с помощью свойства style. Добавьте стиль к элементу a.

Создание класса.

Вам требуется создать функцию showMes(), которая будет показывать сообщение для пользователей и пропадать через 10 секунд.  Само сообщение оформите в виде блока div.  Для этого создайте соответствующий класс и добавьте его с помощью метода classList.add().

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Поделиться
(Visited 2 332 times, 2 visits today)

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: