Añadir !important a una propiedad CSS desde JavaScript

Estoy haciendo una directiva para Vue que permite limitar el número de elementos que se muestran dentro de otro, y he estado un rato volviéndome loco con un asunto.

Resulta que los elementos que tengo que mostrar / ocultar tienen asignada una propiedad display por CSS, y para ocultarlos debía añadir el !important después de la propiedad:

el.childNodes[x].style.display = "none !important";

Bueno, pues esto no estaba funcionando, y ha sido desesperante porque si probaba a cambiar otras propiedades CSS que no estuvieran ya definidas sí funcionaba, por lo que claramente el problema estaba en que no se estaba aplicando el !important.

Por fin encontré la solución, y es que hay que usar la función setProperty y pasar el !important como tercer parámetro:

el.childNodes[x].style.setProperty("display", "none", "important");

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.