/
Вопросы и ответы
/
CSS
/

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

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

4 года назад

Человек-Молекула

Ответы

2

Чтобы получить значения 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)

3 года назад

Кирилл Маркеев