Cómo aplicar !important
a una propiedad CSS vía jQuery o Javascript?
Ejemplo de código:
$('#elem').css('height','50px!important');
Stack Overflow en español es un sitio de preguntas y respuestas para programadores y profesionales de la informática. Solo te toma un minuto registrarte.
Regístrate para unirte a esta comunidadLa mejor manera de aplicar reglas CSS siempre es usando clases.
Así lo mejor es siempre establecer una clase en CSS para manejarlo:
.claseImportante {
height: 50px!important
}
$('#elem').addClass('claseImportante ');
Pero además de esa forma ideal de hacerlo, podría hacerlo directamente con Javascript de la siguiente manera utilizando setProperty
que tiene un parámetro para la importancia:
document.getElementById('elem').style.setProperty('height', '50px', 'important');
O jQuery:
$('#elem')[0].style.setProperty('height', '50px', 'important');
O
$('#elem').attr('style', function(i,s) { return s + 'height: 50px !important;' });
;
) antes del height
. Si no se pone, puede haber problemas en dos casos: si la etiqueta no tiene atributo style
, o si la última última regla del style
no tiene un ;
al final
Ya tienes una buena solución, yo te voy a poner una alternativa si lo quieres hacer con jQuery. Podrías usar $(elemento).css("cssText", "tus-estilos-aquí")
donde "cssText" es el valor completo de los estilos (equivalente a hacer elemento.styles.cssText
en JavaScript puro).
Aquí lo puedes ver funcionando:
$("#elem").css("cssText", "height:50px !important");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>A</div>
<div id="elem">B</div>
<div>C</div>
El problema es que eso va a sobreescribir todo lo que haya en los estilos inline (dentro del atributo style
), por lo que sería conveniente que añadieras los estilos antes para que no se pierdan. Algo como esto:
$("#elem").css("cssText", $("#elem").attr("style") + ";height:50px !important");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>A</div>
<div id="elem" style="color:red">B</div>
<div>C</div>