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

Как получить значения CSS переменных с помощью JavaScript

Пользовательские свойства CSS удобны для создания настраиваемых компонентов и стилей CSS. Но сфера их применения этим не ограничивается. Используя пользовательские свойства, можно обрабатывать информацию в JavaScript.

В прошлом, чтобы получить текущую контрольную точку без запроса ширины окна я делал что-то подобное:

CSS:

body::before < content: 'mobile'; display: none; >@media screen and (min-width: 30rem) < body::before < content: 'large-mobile'; >> @media screen and (min-width: 70rem) < body::before < content: 'desktop'; >>

JavaScript:

function getBreakpoint() < return getComputedStyle(document.querySelector('body'), ':before') .getPropertyValue('content') .replace(/"/g, ''); >

Данный подход хорошо справляется со своей задачей. Но пользовательские свойства CSS обладают большей гибкостью.

Функция getCSSCustomProp

Мне нужно было посмотреть, поддерживается ли Scroll Snap в моем компоненте JavaScript. Потом я понял, что CSS может предоставить решение для этого вопроса.

Я установил значение по умолчанию для компонента следующим образом:

.my-component

Потом, используя @supports , можно сделать следующее:

@supports (scroll-snap-type: x mandatory) < .my-component < --supports-scroll-snap: 1; >>

Затем JavaScript обрабатывает полученные данные:

const myComponent = document.querySelector('.my-component'); const isSnapSupported = getCSSCustomProp('--supports-scroll-snap', myComponent, 'boolean');

Все это работает благодаря приведенной ниже функции:

/** * Передаем элемент и его пользовательские свойства, значение которого нам необходимо. * Мы можем определить, какой тип данных получим в итоге. * * @param propKey * @param element=document.documentElement * @param castAs='string' * @returns */ const getCSSCustomProp = (propKey, element = document.documentElement, castAs = 'string') => < let response = getComputedStyle(element).getPropertyValue(propKey); // Если нужно, приводим в порядок строку if (response.length) < response = response.replace(/"/g, '').trim(); >// Преобразуем возвращаемые данные в любой желаемый тип switch (castAs) < case 'number': case 'int': return parseInt(response, 10); case 'float': return parseFloat(response, 10); case 'boolean': case 'bool': return response === 'true' || response === '1'; >// Возвращаем результат return response; >;

Заключение

Этот метод отличается от того, что я использовал для точек остановки в body . Основное отличие состоит в том, что мы передаем реальные свойства, а не скрываем значения. Так код стал намного чище.

Можете взять эту функцию из Gist, и, надеюсь, когда-нибудь она вам пригодится.

Функция getComputedStyle

Функция getComputedStyle позволяет получить значение любого CSS свойства элемента, даже из CSS файла.

Синтаксис

let объект = getComputedStyle(элемент);

Подробности

Как оно работает (внимание: не так как мы ожидаем): параметром функция принимает элемент, а возвращает объект, который содержит в себе все CSS свойства переданного элемента. Давайте положим этот объект в переменную style . Название произвольное, это просто переменная — как придумаем, так и будем обращаться:

let elem = document.querySelector(‘#elem’); let style = getComputedStyle(elem); // в style лежат CSS свойства

Давайте выведем, к примеру, ширину. Это делается так — style.width :

let elem = document.querySelector(‘#elem’); let style = getComputedStyle(elem); console.log(style.width);

Чтобы вывести, к примеру, левый padding — делаем так — style.paddingLeft :

let elem = document.querySelector(‘#elem’); let style = getComputedStyle(elem); console.log(style.paddingLeft);

В следующем примере мы выведем все интересующие нас CSS свойства для нашего элемента:

text

#elem < width: 200px; height: 200px; padding: 30px; border: 20px solid #BCBCBC; overflow: auto; >let elem = document.querySelector(‘#elem’); let style = getComputedStyle(elem); console.log(‘paddingLeft: ‘ + style.paddingLeft); // выведет ’30px’ console.log(‘borderTopWidth: ‘ + style.borderTopWidth); // выведет ’20px’ console.log(‘borderTopStyle: ‘ + style.borderTopStyle); // выведет ‘solid’

Читать:

Встроенный vpn iphone как включить

Неточность getComputedStyle

Иногда функция getComputedStyle работает не совсем корректно с шириной и высотой. Это связано с тем, что padding и граница расширяют блок. В следующем примере блоку задана ширина 200px , а также граница и border . Реальная ширина блока 300px , но getComputedStyle все равно выведет 200px :

text

#elem < width: 200px; height: 200px; padding: 30px; border: 20px solid #BCBCBC; overflow: auto; >let elem = document.querySelector(‘#elem’); let style = getComputedStyle(elem); console.log(‘width: ‘ + style.width); // выведет ‘200px’ console.log(‘height: ‘ + style.height); // выведет ‘200px’

То есть: получается, что getComputedStyle игнорирует расширение блока показывает его размеры так, как будто этого расширения не было. Но это еще не все: также имеет значение наличие или отсутствие полосы прокрутки — некоторые браузеры отнимают ширину полосы прокрутки от ширины, вычисленной через getComputedStyle , а некоторые не отнимают. В общем тут вообще все не кроссбраузерно и лучше getComputedStyle для определения ширины и высоты не использовать, а пользоваться метриками, которые мы изучим чуть ниже.

Вычисленные значения

Есть еще один нюанс: если ширина задана в % — то после работы getComputedStyle мы увидим ее в px . То есть по сути мы получаем не заданную ширину, а вычисленную. Смотрите на следующем примере:

text

#elem < width: 30%; /* ширина задана в % */ height: 200px; padding: 30px; border: 20px solid #BCBCBC; overflow: auto; >let elem = document.querySelector(‘#elem’); let style = getComputedStyle(elem); console.log(‘width: ‘ + style.width); // выведет ширину в px

Смотрите также

свойство cssText ,
которое массово задает CSS стили

Курсы javascript

Нужно получить значение свойства CSS находящийся в теге с помощью Javascript.

  My text
   
   #text   
  
Последний раз редактировалось Abelx, 09.03.2013 в 20:39 .

09.03.2013, 20:33

без статуса

Регистрация: 25.05.2012

Сообщений: 8,219
Cвойство нун парсить, а строку можно получить и поменять, либо тестить через getComputedStyle http://learn.javascript.ru/styles-and-classes 
 #bigpick  
09.03.2013, 20:46

Регистрация: 11.09.2010

Сообщений: 8,804
var styles = document.getElementsByTagName('style'); // все стили var sheet = styles[0].sheet; // первая таблица стилей var rules = sheet.rules; // правила первой таблицы var style = rules[0].style // набор свойств первого правила первой таблицы var property = style[0]; // первое свойство первого правила первой таблицы var value = style[property]; // его значение
В старых IE что-то подобное тоже есть.
09.03.2013, 21:11

Новичок на форуме

Регистрация: 09.10.2012

Сообщений: 5
А если будет вот так?
 #text0 < opacity:1; >#text1 < opacity:1; >#text3


И мне надо будет только значение свойства "opacity" в #text3 ?

09.03.2013, 21:16

Новичок на форуме

Регистрация: 09.10.2012

Сообщений: 5
Cвойство нун парсить, а строку можно получить и поменять, либо тестить через getComputedStyle http://learn.javascript.ru/styles-and-classes
Я прочитал эту статью но не работает. В firefox-e нечего не показывает а в других не то показывает.
09.03.2013, 21:48

без статуса

Регистрация: 25.05.2012

Сообщений: 8,219
 #text0 < opacity:0.1; >#text1 < opacity:0.2; >#text3  
Последний раз редактировалось Deff, 09.03.2013 в 22:18 .

09.03.2013, 22:17

без статуса

Регистрация: 25.05.2012

Сообщений: 8,219
   
Как получать текущее CSS значение элемента
У меня есть элемент который будет изменять своё свойство scale динамически, и мне надо получать значение scale каждый раз, как оно изменяется, желательно без каких либо библиотек. Я знаю, что можно получить значение css свойства через getComputedStyle(), но если я не ошибаюсь оно получает его всего один раз, а мне надо, чтоб каждый раз, как значение изменялось.
Отслеживать

задан 9 янв 2021 в 12:21

11 1 1 бронзовый знак
А какую задачу это должно решить? И «динамически» - это какая-то бесконечная анимация или при изменении размера окна?
9 янв 2021 в 12:29
При скролле, элемент уменьшается и увеличивается, и при достижение определенного размера элемент должен пропадать
9 янв 2021 в 12:37
Если меняется при скролле, значит уже прикручен JS. Надо бы найти ту функцию, которая меняет scale, немного изменить, чтобы и меняла, и заодно проверяла новый размер. При необходимости - скрывала.
9 янв 2021 в 12:56
Если есть возможость, лучше менять свойство scale через js и соответственно там же менять переменную, а с неё уже брать значение.

Как получить значения CSS переменных с помощью JavaScript

CSS:

JavaScript:

Функция getCSSCustomProp

Заключение

Функция getComputedStyle

Синтаксис

Подробности

Неточность getComputedStyle

Вычисленные значения

Смотрите также

Курсы javascript

Как получать текущее CSS значение элемента

Похожие записи