Как использовать :root вместо класса
Я хочу использовать :root вместо класса, как мне это сделать?
Это то, что я могу сделать?
Это все или все, что я пытаюсь сделать в коде.
Вот что такое :root.
:root {
}
И это рабочий код, который у меня есть. https://jsfiddle.net/s6xocny3/
Как я смогу это сделать, если это возможно?
Можно ли это обновить и исправить? Можно ли его изменить?
https://stackoverflow.com/a/71656076/17974392
Кроме того, я не использую setInterval.
(function randomBackground() {
const classNames = [
"bg1",
"bg2",
"bg3",
"bg4",
"bg5",
"bg6",
"bg7",
"bg8",
"bg9"
];
const random = Math.floor(Math.random() * classNames.length);
document.querySelector("body").classList.add(classNames[random]);
}());.bg1 {
--color-a: linear-gradient(120deg, #155799, #159957);
}
.bg2 {
--color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}
.bg3 {
--color-a: linear-gradient(45deg, #102eff, #d2379b);
}
.bg4 {
--color-a: linear-gradient(90deg, #360033 30%, #0b8793 100%);
}
.bg5 {
--color-a: linear-gradient(115deg, #0a0e88, #00b1ce);
}
.bg6 {
--color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}
.bg7 {
--color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}
.bg8 {
--color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}
.bg9 {
--color-a: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: var(--color-a);
background-repeat: no-repeat;
}Мне сказали, что это можно сделать.
Тогда человек, который сказал вам, что это возможно, должен быть в состоянии вам помочь. Возможно, вы неверно истолковали то, что они сказали, или они неверно истолковали ваш вопрос.
Можно ли это обновить и исправить? stackoverflow.com/a/71656076/17974392
Можно ли его изменить?
Можете ли вы показать мне, как это делается в ответе, пожалуйста?
@Lawrence Cherone предоставил ответ, я просто хотел знать, как это сделать в коде.
Ваш вопрос «Как мне создать стиль :root {--color-1: red; --color-2: blue}" из JavaScript»? Объяснение того, что вы пытаетесь сделать, поможет другим понять ваш вопрос.
Все используют setInterval, я не хочу его использовать.
Я с неудовольствием вижу, что вы не нашли времени, чтобы как следует прочитать мой ответ по ссылке, которую вы сами предоставили. Если вы не заинтересованы в использовании setInterval, игнорируйте его; но распределение случайных переменных --colorX — это ваш ответ.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете переопределить значение пользовательского свойства css, используя setProperty. Например:
document
.documentElement
.style
.setProperty('--dynamic-background', bgs[random]);
Вот фрагмент, похожий на ваш, который использует только 1 пользовательское свойство css и обновляет его значение через javascript:
function randomBackground() {
const bgs = [
"linear-gradient(120deg, #155799, #159957)",
"linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
"linear-gradient(45deg, #102eff, #d2379b)",
"linear-gradient(90deg, #360033 30%, #0b8793 100%)",
"linear-gradient(115deg, #0a0e88, #00b1ce)",
"linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
"linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
"linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
"linear-gradient(0deg, #522db8 0%, #1c7ce0 100%)",
]
const random = Math.floor(Math.random() * bgs.length);
document
.documentElement
.style
.setProperty('--dynamic-background', bgs[random]);
};
randomBackground();:root {
--dynamic-background: linear-gradient(120deg, lime, red);
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: var(--dynamic-background);
background-repeat: no-repeat;
}Я не хочу использовать setInterval.
Я использовал setInterval, чтобы вы могли увидеть код, работающий в действии... Вы можете просто заменить его функцией, которая есть в вашем примере...
@EricaLevine Ничто не заставляет вас использовать setInterval, это просто показывает вам один из способов циклического переключения цветов. Пожалуйста, будьте более осторожны при объяснении чего-либо: «Я не хочу использовать setInterval» не говорит нам ничего, что помогло бы понять, почему вы не хотите его использовать. См. stackoverflow.com/help/как спросить
Установите :root, ваш цвет изменится, затем измените background-image: var(--color-a); на случайный цвет.
(function randomBackground() {
const varNames = [
"color-a",
"color-b",
"color-c"
];
const random = Math.floor(Math.random() * varNames.length);
document.body.style.backgroundImage = 'var(--' + varNames[random] + ')';
}());:root {
--color-a: linear-gradient(120deg, #155799, #159957);
--color-b: linear-gradient(0deg, #522db8 0%, #1c7ce0 100%);
--color-c: linear-gradient(45deg, #102eff, #d2379b);
/* ... */
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-image: var(--color-a);
background-repeat: no-repeat;
}
Ваш вопрос не имеет особого смысла. Текущий код предопределяет ряд наборов правил с различными селекторами классов для отображения стилей при выполнении различных условий (т. е. когда элемент является членом определенного класса), а затем использует JS, чтобы сделать одно из этих условий истинным случайным образом.
:rootвсегда верно для корневого элемента. Вы не можете динамически превратить элемент в корневой элемент с помощью JS.