доступ к CSS переменной.
Такая ситуация.
В каком то прилинкованном css есть Код:
:root { Не изменить (установить) ее через style.setProperty, а именно получить ее. Или хотя бы узнать определена ли такая переменная. |
voraa, ну переменную смотреть надо на каком-то конкретном элементе, т.к. она в каскаде 10 раз поменяться могла. А так - как обычно: getComputedStyle(element).getPropertyValue('--my-var').
|
Спасибо. И действительно.
Я пробовал getComputedStyle(document.documentElement)['--my-var'] не получалось. И в девтулсе смотрел результат getComputedStyle(document.documentElement) - не находил там переменных. |
Как пример.
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><style> body { --my-var: #FF0000;} .ss { background-color: var(--my-var);} </style><script> function fu (color) { document.styleSheets[0].rules[0].style.cssText = '--my-var: '+ color + ';';} // OR .setProperty </script></head><body> <div class="ss">какой то случайный текст</div> <input type="button" value="Button 1" onclick="fu ('#00FF00')" /> <input type="button" value="Button 2" onclick="fu ('#0000FF')" /> </body></html> >> Можно ли как то получить к ней доступ из js? Да можно CSS это такая же часть документа как и все остальное в документе. Главное понимать принципы работы браузера по построению страницы они в целом довольно простые В ответ на запросы браузера приходят потоки байтов которые разбивается на 4ре отдельных парсера HTML CSS JS и отдельные объекты (картинки ифреймы музыка и т.д.) В данном случае парсер CSS создает каскадные таблицы стилей которые доступны через объектную модель документа как свойство самого документа "document.styleSheets" где их можно найти и изменить getComputedStyle только делает запрос к уже сформированным таблицам стилей не изменяя их а только возвращая новый объект. |
MallSerg,
ТО, что можно перебрать все таблицы стилей и все правила я знаю, но не хотелось заморачиваться. Нужно было, просто определить, подключен ли файл с такой переменной, определенной для :root или нет. |
Часовой пояс GMT +3, время: 21:32. |