Руководство по стилизации DOM в JavaScript

Вы можете динамически изменять визуальное представление элементов HTML с помощью JavaScript. Вы можете установить практически любые стили для элементов, например font, color, margin, border, background, text-align, width и height, position и т. д.

В этом разделе мы обсудим различные методы установки стилей в JavaScript.

Установка встроенных стилей для элементов

Встроенные стили применяются непосредственно к определенному элементу HTML с помощью атрибута style. В JavaScript свойство style используется для получения или установки встроенных стилей для элемента.

В следующем примере будут установлены свойства цвета и шрифта для элемента с id="intro".

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS Set Inline Styles Demo</title>
</head>
<body>
    <p id="intro">Это абзац.</p>
    <p>Это еще один абзац.</p>
        
    <script>
    // Выбор элемента
    var elem = document.getElementById("intro");
    
    // Применение стилей к элементу
    elem.style.color = "blue";
    elem.style.fontSize = "18px";
    elem.style.fontWeight = "bold";
    </script>
</body>
</html>

Соглашения об именах CSS-свойств в JavaScript

Многие CSS-свойства, такие как font-size, background-image, text-decoration и т. д., содержат дефисы (-) в своих именах. Так как в JavaScript дефис является зарезервированным оператором и интерпретируется как знак минус, поэтому невозможно написать выражение, например: elem.style.font-size

Для использования таких свойств, вы должны удалять дефисы и использовать заглавные буквы сразу после каждого дефиса, таким образом CSS-свойство font-size становится свойством DOM fontSize, border-left-style становится borderLeftStyle и так далее.

Получение информации о стилях из элементов

Точно так же вы можете получить стили, примененные к элементам HTML, используя свойство style.

Следующий пример получит информацию о стилях от элемента, имеющего id="intro".

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JS Get Element's Style Demo</title>
</head>
<body>
    <p id="intro" style="color:red; font-size:20px;">Это абзац.</p>
    <p>Это еще один абзац.</p>
        
    <script>
    // Выбираем элемент
    var elem = document.getElementById("intro");
     
    // Получаем информацию о стилях из элемента
    alert(elem.style.color);  // Выводит: red
    alert(elem.style.fontSize);  // Выводит: 20px
    alert(elem.style.fontStyle);  // Ничего не выводит
    </script>
</body>
</html>

Свойство style не всегда полезно, потому что оно возвращает только правила, установленные в атрибуте элемента, а не те, которые получены из других источников, таких как во встроенных таблицах или внешних таблиц стилей.

Чтобы получить значения всех CSS-свойств, которые фактически используются для визуализации элемента, вы можете использовать метод window.getComputedStyle(), как показано в следующем примере:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Get Computed Style Demo</title>
<style type="text/css">
    #intro {        
        font-weight: bold;
        font-style: italic;
    }
</style>
</head>
<body>
    <p id="intro" style="color:red; font-size:20px;">Это абзац.</p>
    <p>Это еще один абзац.</p>
        
    <script>
    // Выбираем элемент
    var elem = document.getElementById("intro");
     
    // Получаем вычисленную информацию о стилях
    var styles = window.getComputedStyle(elem);
     
    alert(styles.getPropertyValue("color"));  // Выводит: rgb(255, 0, 0)    
    alert(styles.getPropertyValue("font-size"));  // Выводит: 20px
    alert(styles.getPropertyValue("font-weight"));  // Выводит: 700
    alert(styles.getPropertyValue("font-style"));  // Выводит: italic
    </script>
</body>
</html>

Значение 700 для CSS-свойства font-weight совпадает с ключевым словомbold. Ключевое слово red является обозначением цвета в формате rgb rgb(255,0,0).

Добавление CSS-классов в элементы

Вы также можете получить или установить CSS-классы для HTML-элементов, используя свойство className.

Поскольку class является зарезервированным словом в JavaScript, поэтому JavaScript использует свойство className для выбора значения атрибута HTML-класса. В следующем примере показано, как добавить новый класс или заменить все существующие классы для элемента <div>, имеющего id="info".

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Add or Replace CSS Classes Demo</title>
<style>
    .highlight {
        background: yellow;
    }
</style>
</head>
<body>
    <div id="info" class="disabled">Что-то очень важное!</div>
        
    <script>
    // Выбираем элемент
    var elem = document.getElementById("info");
    
    elem.className = "note";  // Добавляем или заменяем на класс note
    elem.className += " highlight";  // Добавляем новый класс highlight
    </script>
</body>
</html>

Есть лучший способ работы с CSS-классами. Вы можете использовать свойство classList для легкого получения, установки или удаления CSS-классов из элемента. Это свойство поддерживается во всех основных браузерах, кроме Internet Explorer до версии 10. Вот пример:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS classList Demo</title>
<style>
    .highlight {
        background: yellow;
    }
</style>
</head>
<body>
    <div id="info" class="disabled">Что-то очень важное!</div>
    
    <script>
    // Выбираем элемент
    var elem = document.getElementById("info");
     
    elem.classList.add("hide");  // Добавляем новый класс
    elem.classList.add("note", "highlight");  // Добавляем несколько классов
    elem.classList.remove("hide"); // Удаляем класс
    elem.classList.remove("disabled", "note"); // Удаляем несколько классов
    elem.classList.toggle("visible"); // Если класс существует, удаляем его, если нет, то добавляем
     
    // Определяем, существует ли класс
    if(elem.classList.contains("highlight")) {
        alert("Указанный класс существует в элементе.");
    }
    </script>
</body>
</html>