¿Cómo puedo hacer que CSS cambie la sombra del cuadro del botón de var('--out') a var('--in') al hacer clic en el botón, y cuando vuelva a hacer clic volverá a cambiar a --out?
Intenté hacerlo, pero cada vez que hago clic en el botón, simplemente elimina toda la sombra.
HTML + JS:
<body> <section> <button class="color_1"> </button> <script> const btn = document.querySelector('button') const state = '--out' btn.addEventListener('click', _ =>{ document.documentElement.style.setProperty(state, '--in') }) </script> </section> </body>CSS:
:root{ --in: inset 25px 25px 60px rgba(0,0,0,.5); --out: inset -25px -25px 60px rgba(0,0,0,.5); } .color_1{ background-color: blue; border-radius: 200px; height: 300px; width: 300px; box-shadow: var(--out); }Debe usar el selector :root con document.querySelector en lugar de document.documentElement para cambiar la variable css. También debe cambiar el css para usar una nueva variable --state que puede alternar entre --in y --out con el código JS. También deberá usar getProperty para obtener el valor de la variable css --in o --out antes de cambiarla. El siguiente código en la etiqueta del script debería solucionar su problema:
const btn = document.querySelector('button') const state = '--in' btn.addEventListener('click', _ =>{ var root = document.querySelector(":root") root.style.setProperty("--state", root.style.getProperty(state)) })Y también usando lo siguiente en su etiqueta de estilo:
:root{ --in: inset 25px 25px 60px rgba(0,0,0,.5); --out: inset -25px -25px 60px rgba(0,0,0,.5); --state: var(--out); } .color_1{ background-color: blue; border-radius: 200px; height: 300px; width: 300px; box-shadow: var(--state); }Está intentando cambiar el valor de una variable con otra variable.
Necesitará getComputedStlye() :
:root{ --in: inset 25px 25px 60px red; --out: inset -25px -25px 60px green; } .color_1{ background-color: blue; border-radius: 200px; height: 300px; width: 300px; box-shadow: var(--out); } <body> <section> <button class="color_1"> </button> <script> const btn = document.querySelector('button') const state = '--out' btn.addEventListener('click', _ =>{ document.documentElement.style.setProperty(state, getComputedStyle(document.documentElement).getPropertyValue('--in')); }); </script> </section> </body>Pero la forma ideal no sería cambiar el valor de su variable raíz. ¿Qué sucede si necesita ese valor en otro lugar? Puede tener clases separadas para esto en su elemento, que agrega/alterna de forma condicional.
:root{ --in: inset 25px 25px 60px red; --out: inset -25px -25px 60px green; } .color_1{ background-color: blue; border-radius: 200px; height: 300px; width: 300px; } .shadow1{ box-shadow: var(--out); } .shadow2{ box-shadow: var(--in); } <body> <section> <button class="color_1 shadow1"> </button> <script> const btn = document.querySelector('button') const state = '--out' btn.addEventListener('click', function() { //this.classList.remove('shadow1'); this.classList.toggle('shadow2'); }); </script> </section> </body>Ok, esto es lo que tengo para ti!
Estaba eliminando el valor --out y configurándolo en --in se veía así (--out: --in;) . Es por eso que vimos que se eliminó la sombra del cuadro
Este código: document.documentElement - no apuntaba al fondo de su botón - cámbielo a: btn.style.boxShadow
const btn = document.querySelector('button'); const state = '--out' btn.addEventListener('click', _ =>{ document.documentElement.style.boxShadow = 'var(--in)'; })