Quiero usar :root en lugar de una clase aquí, ¿cómo lo haría aquí?
¿Es esto algo que puedo hacer?
Eso es todo, o todo lo que estoy tratando de hacer en el código.
Esto es lo que es :root .
:root { }Y este es el código de trabajo que tengo. https://jsfiddle.net/s6xocny3/
¿Cómo sería capaz de hacer eso si es posible?
¿Se puede actualizar y arreglar este? ¿Se puede modificar?
https://stackoverflow.com/a/71656076/17974392
Además, no estoy usando 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; }Configure en :root , sus variables de color, luego cambie la background-image: var(--color-a); con el color al azar.
(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; }Puede redefinir el valor de una propiedad css personalizada usando setProperty . Por ejemplo:
document .documentElement .style .setProperty('--dynamic-background', bgs[random]);Aquí hay un fragmento similar al suyo que solo usa 1 propiedad css personalizada y actualiza su valor a través de 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; }