В этом руководстве подробно рассказывается о цели и работе свойства «стиль» элемента HTML DOM в JavaScript.
Как работает свойство «style» элемента HTML DOM в JavaScript?
HTML DOM» стиль ” — это свойство только для чтения, которое работает на основе выделенных свойств стиля соответственно. Кроме того, он возвращает « CSSStyleDeclaration », который содержит все встроенные атрибуты стиля конкретного элемента HTML.
Примечание: Объект «CSSStyleDeclaration» содержит атрибуты стиля CSS, определенные в разделе заголовка.
Синтаксис (установка свойства стиля)
элемент. стиль . свойство '=' ценитьСогласно приведенному выше синтаксису, « стиль ' свойство поддерживает только один параметр ' ценить », который представляет значение указанного свойства стиля.
Синтаксис (возврат свойства стиля)
элемент. стиль . свойствоДавайте практически реализуем рассмотренный выше синтаксис свойства «стиль».
Пример 1. Использование свойства «style» для установки цвета определенного элемента HTML
В этом примере применяется основной синтаксис « стиль », чтобы установить значение свойства «стиль», чтобы изменить цвет конкретного элемента HTML.
HTML-код
Сначала просмотрите данный HTML-код:
< h2 > Используйте свойство стиля в JavaScript h2 >
< идентификатор h3 '=' 'Н3' > Второй подзаголовок. h3 >
В приведенных выше строках кода:
- “ HTML-тег определяет первый подзаголовок.
- “ » создает второй подзаголовок уровня 3 с назначенным идентификатором «H3».
JavaScript-код
Далее следуйте указанному коду JavaScript:
< сценарий >документ. получитьэлементбиид ( 'Н3' ) . стиль . цвет '=' 'зеленый' ;
сценарий >
В приведенном выше фрагменте кода « документ.getElementById() ” обращается к включенному “ 'элемент через его идентификатор' H3 ”, чтобы установить указанный “ цвет » значение атрибута элемента через « стиль.цвет ' свойство.
Выход
Вывод показывает, что визуальное представление целевого HTML-элемента установлено соответствующим образом с помощью свойства «стиль».
Пример 2. Использование свойства «style» для получения значения примененного атрибута «style»
В этом примере свойство «стиль» помогает узнать назначенный атрибут «стиль» элемента HTML, используя его обобщенный синтаксис (возврат свойства стиля).
HTML-код
Код HTML указан здесь:
< h2 > Используйте свойство стиля в JavaScript h2 >< идентификатор h3 '=' 'Н3' стиль '=' 'цвет фона:оранжевый;' > Значение цвета фона второго подзаголовка равно : h3 >
< h4 идентификатор '=' 'демо' > h4 >
В этом коде:
- “ HTML-тег использует атрибут «style», который устанавливает цвет фона HTML-элемента «
».
- “ » создает пустой подзаголовок 4-го уровня с идентификатором « демо ».
JavaScript-код
Теперь посмотрите на данный код JavaScript:
< сценарий >константа ценить '=' документ. получитьэлементбиид ( 'Н3' ) . стиль . фоновый цвет ;
документ. получитьэлементбиид ( 'демо' ) . внутреннийHTML '=' ценить ;
сценарий >
В выше написанном коде:
- Переменная ' ценить ” объявляется с “ константа ключевое слово, которое применяет « документ.getElementById() » для получения элемента «
», используя его идентификатор для получения значения примененного атрибута «style» и применения его к элементу, т. е. «
» через свойство «style».
- Метод «document.getElementById()» снова используется для доступа к добавленному пустому элементу «
» и отображения значения выделенного атрибута «стиль» для извлеченного элемента HTML и добавления его в качестве подзаголовка через « внутреннийHTML ' свойство.
Выход
Вывод применяет цвет фона к элементу, и значение установленного атрибута «стиль» также возвращается соответствующим образом.
Заключение
JavaScript использует « стиль », чтобы назначать и возвращать встроенные свойства «стиля» элемента HTML DOM. Требуется дополнительное «значение» для соответствующего применения желаемой функциональности. Помимо настройки и извлечения, также полезно изменить существующий атрибут «стиль». Это руководство продемонстрировало основную цель, работу и практическую реализацию свойства HTML DOM Element style.