В этом руководстве вы узнаете, как использовать метод JavaScript getComputedStyle() для получения вычисленных свойств CSS элемента.
getComputedStyle() — это метод объекта window, который возвращает объект, содержащий вычисленный стиль элемента:
let style = window.getComputedStyle(element [,pseudoElement]);
Параметры
Метод getComputedStyle() принимает два аргумента:
element— это элемент, для которого вы хотите вернуть вычисленные стили. Если вы передадите другой тип узла, например, текстовый узел, метод выдаст ошибку.pseudoElementуказывает псевдоэлемент для сопоставления. По умолчанию он равенnull.
Например, если вы хотите получить вычисленное значение всех свойств CSS ссылки с состоянием наведения, вы передаете следующие аргументы в метод getComputedStyle() :
let link = document.querySelector('a');
let style = getComputedStyle(link,':hover');
console.log(style);
Обратите внимание, что window является глобальным объектом, поэтому его можно опустить при вызове метода getComputedStyle().
Возвращаемое значение
Метод getComputedStyle() возвращает объект живого стиля, который является экземпляром объекта CSSStyleDeclaration. Стиль автоматически обновляется при изменении стилей элемента.
Примеры
Давайте рассмотрим несколько примеров использования getComputedStyle().
1) Простой пример
Рассмотрим следующий пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS getComputedStyle() Demo</title>
<style type="text/css">
.message {
background-color: #fff3d4;
border: solid 1px #f6b73c;
padding: 20px;
color: black;
}
</style>
</head>
<body>
<p class="message" style="color:red">
This is a JS getComputedStyle() Demo!
</p>
<script>
let message = document.querySelector('.message');
let style = getComputedStyle(message);
console.log('color:', style.color);
console.log('background color:', style.backgroundColor);
</script>
</body>
</html>Обратите внимание, что для демонстрации мы смешиваем все CSS и JavaScript с HTML. На практике вы должны разделить их в разных файлах.
Выход:
color: rgb(255, 0, 0) background color: rgb(255, 243, 212)
Как это работает:
- Сначала определите правила CSS для класса
messageв разделе заголовка HTML-файла. Цвет текста черный. - Во-вторых, объявите элемент абзаца, цвет текста которого будет красным, как определено во встроенном стиле. Это правило переопределит правило, определенное в разделе заголовка.
- В-третьих, используйте метод
getComputedStyle(), чтобы получить все вычисленные стили элемента абзаца. Свойство color имеет красный цвет, как указано в окне консоли(rgb(255, 0, 0)), как и ожидалось.
2) Для псевдоэлементов
В следующем примере используется метод getComputedStyle() для извлечения информации о стиле из псевдоэлемента:
<html>
<head>
<title>JavaScript getComputedStyle() Demo</title>
<style>
body {
font: arial, sans-serif;
font-size: 1em;
line-height: 1.6;
}
p::first-letter {
font-size: 1.5em;
font-weight: normal
}
</style>
</head>
<body>
<p id='main'>JavaScript getComputedStyle() Demo for pseudo-elements</p>
<script>
let p = document.getElementById('main');
let style = getComputedStyle(p, '::first-letter');
console.log(style.fontSize);
</script>
</body>
</html>Выход:
24px
Как это работает:
- Во-первых, определите правила CSS для первой буквы любого элемента абзаца в разделе заголовка HTML-файла.
- Затем используйте метод
getComputedStyle(), чтобы получить вычисленный стиль псевдоэлемента. Размер шрифта первой буквы абзаца с идентификатором составляет 24 пикселя.
Заключение
getComputedStyle()— это метод объектаwindow.- Метод возвращает объект, содержащий вычисленный стиль элемента.