Регулярное обновление CSS внутри iFrame

Question

У меня есть виджет выбора цвета на моей странице.Я пытаюсь прикрепить обработчик событий, который возьмет выбранный цвет и применит список правил CSS для iFrame на моей странице.IFrame находится в том же домене, что и моя страница, поэтому обновление встроенного CSS не является проблемой.

Проблема заключается в том, что мне нужно использовать селекторы псевдо-классов (например: hover и т. Д.) В некоторых из моих стилей, что не может быть сделано в строке.Я мог бы создать элемент стиля и добавить его к заголовку моего iFrame, но это означало бы, что новый элемент добавляется каждый раз, когда выбирается новый цвет.Есть ли способ «заменить» элемент стиля каждый раз, когда выбирается цвет?Или, альтернативно, есть ли более простое решение моей проблемы?

Answer 1

Для этого вы можете использовать CSS-переменные.

Определите ваши цвета для ': root' в вашем CSS-файле:

:root{
    --myColor: red;
    --mySecondColor:green;
}

, затем установите colorProperties в ваших элементах следующим образом:

button{
    background-color: var(--myColor);
    padding:10px;
}
div{
    color: var(--mySecondColor);
    padding:10px;
}

Теперь в JavaScriptВы можете изменить эти свойства глобально

document.documentElement.style.setProperty('--myColor','blue');
document.documentElement.style.setProperty('--mySecondColor','orange');

Или изменить только локально

document.querySelector('button').style.setProperty('--myColor','blue');