Вы можете динамически изменять визуальное представление элементов 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>

Похожие посты

Руководство по сортировке массивов в JavaScript

Сортировка — обычная задача при работе с массивами. Она будет использоваться, например, если вы захотите отобразить названия городов или регионов в алфавитном порядке. JavaScript массив (array) имеет встроенный метод sort() для сортировки элементов массива в алфавитном порядке. Следующий пример демонстрирует, как это работает: Реверсирование массива Вы можете использовать метод reverse(), чтобы изменить порядок элементов массива…

Руководство по массивам в JavaScript

Массивы — это сложные переменные, которые позволяют нам хранить группы значений под одним именем переменной. Массивы JavaScript могут хранить любое допустимое значение, включая строки, числа, объекты, функции и даже другие массивы, что позволяет создавать более сложные структуры данных, такие как массив объектов или массив массивов. Предположим, вы хотите сохранить название цветов в своем коде JavaScript….

Руководство по работе с атрибутами DOM в JavaScript

Атрибуты — это специальные слова, используемые внутри начального тега HTML-элемента для управления поведением тега или предоставления дополнительной информации о теге. JavaScript предоставляет несколько методов для добавления, удаления или изменения атрибутов HTML-элемента. В этом разделе мы узнаем об этих методах подробно. Получение значения атрибута элемента Метод getAttribute() используется для получения текущего значения атрибута элемента. Если указанный…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.