В этом посте рассказывается о цели, работе и использовании метода «getComputedStyle()» объекта окна в JavaScript.
Что делает метод «getComputedStyle()» объекта Window в JavaScript?
“ получитьвычисленный стиль() » возвращает объект «CSSStyleDeclaration», содержащий набор свойств CSS и их значений. Он вычисляет целевые свойства стиля HTML-элемента. Кроме того, он также играет важную роль в вычислении свойств стиля конкретной части HTML-элемента.
Синтаксис
окно. getComputedStyle ( элемент , псевдоэлемент )
В приведенном выше синтаксисе:
- окно: Это глобальный объект, представляющий окно браузера.
- элемент: Он указывает конкретный элемент HTML, стиль которого необходимо вычислить.
- псевдоЭлемент: Он относится к части данного элемента HTML, например, первая буква, последняя буква и т. д.
В следующем разделе проводится практическая иллюстрация метода «getComputedStyle()» с помощью примеров.
HTML-код (включая стили CSS)
Во-первых, просмотрите следующий HTML-код:
< голова >
< стиль >
h3{
размер шрифта: 20px;
цвет фона: зелено-желтый
}
< / стиль >
< / голова >
< тело >
< h2 > Используйте метод getComputedStyle() объекта Window < / h2 >
< h3 идентификатор '=' 'демо' > Размер шрифта данного элемента HTML: < / h3 >
< п идентификатор '=' 'образец' >< / п >
В приведенных выше строках кода:
- “ <стиль> » применяет указанный стиль « HTML-элемент.
- В ' <тело> », в раздел « ”
- Затем элемент «
», имеющий идентификатор « демо ” определяет второй подзаголовок.
- Наконец, « Тег ' относится к пустому абзацу с идентификатором ' образец ” для отображения вычисленных свойств CSS целевого элемента.
Примечание: Этот HTML-код используется во всех приведенных примерах этого поста.
Пример 1. Применение метода «getComputedStyle()» для вычисления размера шрифта HTML-элемента
В этом примере применяется метод getComputedStyle() для получения размера шрифта целевого HTML-элемента.
JavaScript-код
Рассмотрим указанный код JavaScript:
< сценарий >константа элемент '=' документ. получитьэлементбиид ( 'демо' ) ;
константа объект '=' окно. getComputedStyle ( элемент )
пусть размер '=' объект получитьпропертивалуе ( 'размер шрифта' ) ;
документ. получитьэлементбиид ( 'образец' ) . внутреннийHTML '=' размер ;
сценарий >
В приведенном выше фрагменте кода:
- Объявить переменную ' элемент ' с ключевым словом 'const', которое использует ' получитьэлемент по идентификатору() ' метод для доступа к элементу '
' через его идентификатор ' демо ».
- После этого примените « получитьвычисленный стиль() », чтобы вычислить свойства CSS извлеченного элемента «
».
- Далее « размер » применяет « получить значение свойства () ' метод, который возвращает значение примененного свойства CSS ' размер шрифта » в виде строки.
- Наконец, метод «getElementById()» получает доступ к пустому абзацу и отображает рассчитанное значение свойства CSS, используя « внутреннийHTML ' свойство.
Выход
Как видно, выходные данные отображают примененное значение размера шрифта для соответствующего элемента HTML, т. е. «
».
Пример 2. Применение метода «getComputedStyle()» для вычисления цвета фона HTML-элемента
В этом примере обсуждаемый метод используется для вычисления цвета фона определенного элемента HTML:
< сценарий >константа элемент '=' документ. получитьэлементбиид ( 'демо' ) ;
константа объект '=' окно. getComputedStyle ( элемент )
пусть бгколор '=' объект получитьпропертивалуе ( 'фоновый цвет' ) ;
документ. получитьэлементбиид ( 'образец' ) . внутреннийHTML '=' бгколор ;
сценарий >
В приведенном выше блоке кода « получитьвычисленный стиль() » метод вычисляет « фоновый цвет » элемента «
» с идентификатором «demo» и возвращает его значение как «rgb» через « получить значение свойства () метод.
Выход
Вывод ясно показывает вычисленный цвет фона выбранного HTML-элемента.
Заключение
JavaScript предлагает « получитьвычисленный стиль() » для вычисления свойств стиля CSS целевого элемента HTML. Вычисленное значение этого метода представляет собой строку, содержащую свойства CSS и их значения. Его можно реализовать по-разному, используя JavaScript для получения свойств CSS любого элемента HTML. В этом посте представлено подробное представление о цели, работе и использовании метода «getComputedStyle()» объекта окна в JavaScript.