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

4 года назад

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

Присоединяйтесь к нашему Telegram-сообществу

Ответы

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

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

1 месяц

Основы JavaScript

Синтаксис, основы программирования, переменные, строки, арифметика, условные конструкции, циклы, функции, модули

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

5 месяцев

Профессиональная верстка

Навык адаптивной вёрстки с современными подходами для корректного отображения сайтов на любых устройствах и разрешениях

1 месяц

СИКП на JS

Навык понимать программы на фундаментальном уровне, уверенно проходить собеседования и решать сложные задачи

1 месяц

Позиционирование в CSS

Навык разработки адаптивных интерфейсов, позволяющий создавать удобные и функциональные решения для различных устройств

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