getComputedStyle() в JavaScript — обчислені стилі елемента

Загальний опис

Метод Window.getComputedStyle() є важливим інструментом у роботі з веб-інтерфейсами на JavaScript. Цей метод використовується для отримання значень всіх CSS-властивостей обраного елемента у вигляді об'єкта, що відображає їх кінцеві (виведені) стилі, з урахуванням всіх активних стилів, включаючи каскадні, наслідувані, та комп'ютерно-обраховані стилі. Це дає можливість точно зрозуміти та маніпулювати стилями елементів на сторінці.

getComputedStyle() дає можливість перегляду кінцевих стилів елемента, які були застосовані після обробки всіх CSS правил та скриптів. Це особливо корисно для дебагінгу стилів, автоматичного тестування інтерфейсів, а також при динамічному маніпулюванні стилями через JavaScript.

Використання:

• Основи:

  let element = document.getElementById("myElement");
  let styles = window.getComputedStyle(element);
  console.log(styles.marginTop); // виводить верхній відступ елемента
  

• Робота з псевдоелементами: Можна отримати стилі псевдоелементів, наприклад, ::before та ::after:

  let pseudoBefore = window.getComputedStyle(element, '::before');
  console.log(pseudoBefore.content); // виводить вміст псевдоелемента ::before
  

• Динамічне використання:

  if (window.getComputedStyle(element).display === "none") {
    element.style.display = "block"; // змінює стиль, якщо елемент схований
  }
  

Загалом, Window.getComputedStyle() є потужним інструментом для детального розуміння та керування стилями елементів на веб-сторінці, що робить його незамінним у комплексному веб-розробництві.

правити

Загальний опис

Тут ховається різниця, якої не знають новачки. element.style показує лише інлайновий стиль — те, що написано в атрибуті style. Якщо колір задано в таблиці стилів, element.style.color поверне порожній рядок.

getComputedStyle() бачить усе: класи, каскад, успадкування, значення за замовчуванням.

Але є ціна: значення повертаються у підсумкових одиницях. Задав width: 50% — отримаєш '640px'. Задав колір #fff — отримаєш 'rgb(255, 255, 255)'.

Ним же читають значення CSS-змінних — і саме так JavaScript дізнається кольори теми, не дублюючи їх у коді.

правити

Порада

Використовуйте цей метод для отримання поточних стилів елемента, особливо коли потрібно точно знати, які стилі застосовані. Наприклад, якщо ви хочете зрозуміти, який колір фону застосований до елемента, getComputedStyle() дасть точний результат, навіть якщо цей колір визначений в каскадних таблицях стилів (CSS).

автор: Bond правити

Порада

Пам'ятайте, що getComputedStyle() також може використовуватися для отримання стилів псевдоелементів. Просто передайте другий аргумент з вказівкою на псевдоелемент, наприклад, getComputedStyle(element, '::before').

автор: Bond правити

Порада

Значення, повернуті getComputedStyle(), часто містять одиниці вимірювання, як-от пікселі. Ви можете перетворити ці значення у числа для подальших обчислень, використовуючи, наприклад, parseInt() або parseFloat().

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

getComputedStyle(element)
getComputedStyle(element, pseudoElt)

Параметри

element

Елемент, для якого потрібно отримати вираховані стилі. Це повинен бути об'єкт Element.

автор: Bond

правити

pseudoElt

Рядок, який вказує псевдо-елемент, для якого потрібно отримати стилі. Якщо відсутній або null, вважається, що запит стосується реального елемента.

автор: Bond

правити

Повернення

object

Повертає об'єкт типу CSSStyleDeclaration, який є "живим" і автоматично оновлюється при зміні стилів елемента. Цей об'єкт містить всі стилі, застосовані до елемента, включаючи ті, що визначені у внутрішніх та зовнішніх таблицях стилів CSS, а також інлайн-стилі. Значення стилів представлені у формі рядків, що дозволяє легко отримувати доступ до конкретних CSS-властивостей та їх значень.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	7.2	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	—

Приклади

+ запропонувати свій приклад у пісочниці

<div id="myElement">Демонстраційний елемент</div>

// Отримуємо посилання на елемент за його ідентифікатором
var myElement = document.getElementById('myElement');

// Використовуємо метод getComputedStyle для отримання об'єкта зі стилями елементу
var computedStyle = window.getComputedStyle(myElement);

// Отримуємо значення конкретного стилю (наприклад, ширини елементу)
var width = computedStyle.getPropertyValue('width');

// Виводимо значення в консоль
console.log('Ширина елементу: ' + width);

<div id="myElement">Демонстраційний елемент</div>

// Отримуємо посилання на елемент за його ідентифікатором
var myElement = document.getElementById('myElement');

// Отримуємо поточну ширину елементу
var computedStyle = window.getComputedStyle(myElement);
var currentWidth = computedStyle.getPropertyValue('width');

// Змінюємо ширину елементу (на приклад, збільшуємо на 50 пікселів)
var newWidth = parseInt(currentWidth) + 50;
myElement.style.width = newWidth + 'px';

// Перевіряємо, як змінилася ширина
console.log('Нова ширина елементу: ' + newWidth + 'px');

<header>
    <h2 class="title">Window.getComputedStyle() Method</h2>
    <p class="description">Цей метод дозволяє отримувати обчислені стилі елементів на веб-сторінці.</p>
</header>
<main>
    <div class="result">
        <div id="styleBox">Це текст для демонстрації</div>
        <label for="bgColor">Колір фону:</label>
        <input type="color" id="bgColor">
        <label for="textColor">Колір тексту:</label>
        <input type="color" id="textColor">
    </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#styleBox {
  padding: 20px;
  text-align: center;
}

input[type="color"] {
  margin: 10px;
}

document.addEventListener("DOMContentLoaded", function () {
  var bgColorInput = document.getElementById("bgColor");
  var textColorInput = document.getElementById("textColor");
  var styleBox = document.getElementById("styleBox");

  // Функція для оновлення стилів за значеннями ползунків
  function updateStyles() {
    var bgColor = bgColorInput.value;
    var textColor = textColorInput.value;

    styleBox.style.backgroundColor = bgColor;
    styleBox.style.color = textColor;

    // Використовуємо getComputedStyle() для отримання поточних стилів та виведення їх в консоль
    var computedStyle = window.getComputedStyle(styleBox);
    console.log('Фон: ' + computedStyle.backgroundColor);
    console.log('Колір тексту: ' + computedStyle.color);
  }

  // Встановлюємо початкові значення
  bgColorInput.value = "#f8f8f8";
  textColorInput.value = "#000000";
  updateStyles();

  // Додаємо обробники подій для ползунків
  bgColorInput.addEventListener("input", updateStyles);
  textColorInput.addEventListener("input", updateStyles);
});
//# sourceURL=pen.js

<style>.box { color: rebeccapurple; }</style>
<div id="box" class="box">Текст</div>

const box = document.getElementById('box');

console.log(box.style.color);                       // '' — порожньо!
console.log(getComputedStyle(box).color);           // 'rgb(102, 51, 153)'

// значення завжди підсумкові: відсотки стануть пікселями
console.log(getComputedStyle(box).width); // '640px', а не '50%'

// читання CSS-змінної — так JS дізнається кольори теми
const accent = getComputedStyle(document.documentElement)
    .getPropertyValue('--pico-primary')
    .trim();

console.log(accent);