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