Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   доступ к CSS переменной. (https://javascript.ru/forum/dom-window/84937-dostup-k-css-peremennojj.html)

voraa 09.02.2023 10:59

доступ к CSS переменной.
 
Такая ситуация.
В каком то прилинкованном css есть
Код:

:root {
 --my-var: 42;
}

Можно ли как то получить к ней доступ из js?
Не изменить (установить) ее через style.setProperty, а именно получить ее.
Или хотя бы узнать определена ли такая переменная.

Aetae 09.02.2023 13:26

voraa, ну переменную смотреть надо на каком-то конкретном элементе, т.к. она в каскаде 10 раз поменяться могла. А так - как обычно: getComputedStyle(element).getPropertyValue('--my-var').

voraa 09.02.2023 14:10

Спасибо. И действительно.
Я пробовал
getComputedStyle(document.documentElement)['--my-var']
не получалось.
И в девтулсе смотрел результат getComputedStyle(document.documentElement) - не находил там переменных.

MallSerg 10.02.2023 02:19

Как пример.
<!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 только делает запрос к уже сформированным таблицам стилей не изменяя их а только возвращая новый объект.

voraa 10.02.2023 07:22

MallSerg,
ТО, что можно перебрать все таблицы стилей и все правила я знаю, но не хотелось заморачиваться.
Нужно было, просто определить, подключен ли файл с такой переменной, определенной для :root или нет.


Часовой пояс GMT +3, время: 21:32.