Показать сообщение отдельно
  #4 (permalink)  
Старый 10.02.2023, 02:19
Аватар для MallSerg
Профессор
Отправить личное сообщение для MallSerg Посмотреть профиль Найти все сообщения от MallSerg
 
Регистрация: 07.03.2011
Сообщений: 1,127

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