Как получить значение свойства css через javascript

Question

Accepted Answer

Чтобы получить значения CSS свойств через JavaScript можно воспользоваться методом window.getComputedStyle(). Этот метод возвращает объект, содержащий значения всех CSS свойств элемента после применения всех таблиц стилей, а также значения свойств по умолчанию для данного элемента.

Так как метод возвращает обычный JavaScript объект, то далее мы можем обращаться к нужным нам свойствам (ключам) этого объекта.

Рассмотрим небольшой пример. В HTML документе находится параграф с каким-то текстом. Для параграфа заданы следующие стили:

p {
  color: red;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  word-spacing: 10px;
}

Переходим в JavaScript документ:

const el = document.querySelector('p'); // получаем наш параграф
const styles = window.getComputedStyle(el); // получаем объект со всеми вычисленными стилями

// Теперь можем обращаться к нужным нам CSS свойствам:
console.log(styles.wordSpacing) // => 10px
console.log(styles.textAlign) // => center
console.log(styles.color) // => rgb(255, 0, 0)

Как получить значение свойства css через javascript

Похожие вопросы