Cuando escribo por primera vez la primera versión, world sigue siendo azul. Cuando lo modifico a la segunda versión, world no se vuelve azul.
La primera versión usa class="Class en el elemento padre, para que todos los elementos hijo puedan usar esta propiedad. Pero quiero modificar la propiedad del elemento hijo. Resulta que la modificación no funciona como se esperaba.
Luego probé la segunda versión. En lugar de poner class="Class" en la etiqueta <div> , uso class="Class en cada elemento hijo. En este momento, la modificación funcionó.
null significa que el color aún sigue la propiedad establecida original en el archivo css.
unset significa borrar el valor de esta propiedad y establecerlo en el valor predeterminado.
archivo CSS de la siguiente manera:
.Class { color: blue; }HTML:
primera versión
<div class="Class"> <h1>hello</h1> <h1 id="hello">hello</h1> <h1 id="world">world</h1> <script> let hello = document.querySelector("#hello"); let world = document.querySelector("#world"); hello.style.color = null; world.style.color = "unset"; </script> </div>segunda versión
<div> <h1 class="Class">hello</h1> <h1 id="hello" class="Class">hello</h1> <h1 id="world" class="Class">world</h1> <script> let hello = document.querySelector("#hello"); let world = document.querySelector("#world"); hello.style.color = null; world.style.color = "unset"; </script> </div> Por conveniencia, generalmente elegimos la primera versión, porque no necesita agregar class="Class" en cada etiqueta de elemento hijo. Sin embargo, causará el problema mencionado anteriormente. ¿Por qué surge el problema? ¿Y hay otra forma de seguir usando class="Class" en el elemento padre, y puede cambiar la propiedad del elemento hijo?
La segunda versión se puede modificar de la siguiente manera para que el color del texto en el world sea azul:
<div> <h1 class="Class">hello</h1> <h1 id="hello" class="Class">hello</h1> <h1 id="world" class="Class">world</h1> <script> let hello = document.querySelector("#hello"); let world = document.querySelector("#world"); hello.style.color = null; </script> </div> Configurando world.style.color = "unset"; en el primer caso, estaba configurando el color del elemento #world al valor de color heredado del padre, que era azul.
Se espera que initial value para la propiedad de color sea negro, que es lo que se aplicaría al establecer color en no unset en el segundo caso.
Referencia: https://developer.mozilla.org/en-US/docs/Web/CSS/unset
use la palabra clave initial en lugar de unset para lograr lo que desea.
let hello = document.querySelector("#hello"); let world = document.querySelector("#world"); hello.style.color = null; world.style.color = "initial"; .Class{ color:blue; } <div class="Class"> <h1>hello</h1> <h1 id="hello">hello</h1> <h1 id="world">world</h1> </div>