English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML DOM позволяет JavaScript получить и изменить стиль элементов HTML (CSS).
Вы можете использоватьstyleСвойства применяют стиль к определенным элементам HTML.
Чтобы изменить стиль HTML-элемента, используйте следующий синтаксис:
element.style.property = value
Ниже приведен пример изменения<h1>Стиль элемента:
<!DOCTYPE html>
<html>
<h1 id="demo">Свойства стиля HTML DOM</h1>
<script>
document.getElementById("demo").style.color = "blue";
</script>
</html>Проверьте, посмотрите <‹/›Когда пользователь нажимает кнопку, в этом примере также изменяется<h1>Стиль элемента:
<h1 id="demo">Свойства стиля HTML DOM</h1>
<button onclick="myFunc()">Нажмите</button>
<script>
function myFunc() {
document.getElementById("demo").style.color = "blue";
}
</script>Проверьте, посмотрите <‹/›В этом примере также изменяется<h1>Стиль элемента:
<h1 id="demo">Свойства стиля HTML DOM</h1>
<button onclick="document.getElementById('demo').style.color = 'blue';">Нажмите</button>Проверьте, посмотрите <‹/›Таким же образом, вы можете использоватьstyleПрименение стиля к HTML-элементу с помощью атрибута.
Ниже приведен пример сid="demo"Информация о стиле для элемента (border-top）：
var x = document.getElementById("demo").style.borderTop;Проверьте, посмотрите <‹/›Примечание:Когда вы получаетеstyleИнформация о стиле не очень полезна, так как этот атрибут возвращает только правила стиля, установленные в свойстве style элемента, но не правила стиля из других источников, таких как встроенные таблицы стилей или внешние таблицы стилей.
Чтобы получить значения всех CSS-атрибутов, фактически используемых для отображения элемента, можно использовать следующее:window.getComputedStyle()Метод:
let para = document.querySelector('p');
let compStyles = window.getComputedStyle(para);
para.innerHTML = 'font-size: ' + compStyles.getPropertyValue('font-size');
para.innerHTML += '<br>line-height: ' + compStyles.getPropertyValue('line-height');
para.innerHTML += '<br>padding: ' + compStyles.getPropertyValue('padding');Проверьте, посмотрите <‹/›Вы также можете использоватьclassNameСвойство получает или устанавливает CSS-класс для HTML-элемента.
document.getElementById("x").className = "para";Проверьте, посмотрите <‹/›Вы также можете использовать этуclassListСвойства легко получить, установить или удалить CSS-классы из элементов.
Ниже приведен пример для<p>Добавить элементparaКласс:
var elem = document.getElementById("x");
elem.classList.add("para");Проверьте, посмотрите <‹/›Добавление нескольких классов к<p>Элемент:
var elem = document.getElementById("x");
elem.classList.add("para", "shadow");Проверьте, посмотрите <‹/›Из<p>Удаление класса из элемента:
var elem = document.getElementById("x");
elem.classList.remove("para");Проверьте, посмотрите <‹/›Переключение между двумя классами<p>Элемент:
var elem = document.getElementById("x");
elem.classList.toggle("anotherClass");Проверьте, посмотрите <‹/›Переключить класс ("открыть") для создания кнопки侧面 навигации: