cambiar el color de background de div con jquery que tiene una label! important

Usar un complemento que llame a un .jsp que use su propia hoja de estilo alojada externamente (es una incrustación de yelp, tratando de manipular el aspecto de la misma). El único elemento que bash cambiar tiene una label! Importante, y parece que no puedo cambiarlo …

Lo intenté

<script type="text/javascript"> $('.elementToChange').css({'background-color':'black'});​ </script> 

en vano. Ideas?

Parece que en las versiones más actualizadas de jQuery (al less 1.7.2 y superior) simplemente puede configurar el css:

 $('#elementToChange').css('background-color', 'blue'); 

Ver http://jsfiddle.net/HmXXc/185/

En las versiones anteriores de jQuery y Zepto, primero tenías que borrar el CSS:

 // Clear the !important css $('#elementToChange').css('background-color', ''); 

Y luego restablecerlo usando:

 $('#elementToChange').css('background-color', 'blue'); 

O en una sola línea:

 $('#elementToChange') .css('background-color', '') .css('background-color', 'blue'); 

Ver http://jsfiddle.net/HmXXc/186/ .

Respuesta original :

Nota: esto puede ser una mala idea, ya que eliminará cualquier otro estilo en línea

Editaría el atributo de estilo directamente

 $('.elementToChange').attr('style', 'background-color: blue !important'); 

http://jsfiddle.net/RichardTowers/3wemT/1/

Aquí está su solución:

http://jsfiddle.net/irpm/bdhpp/2/

La idea es agregar la class:

 $('.elementToChange').addClass('blackBg'); 

Puede manipular css importantes usando los siguientes pasos, ya sea que pueda usar css en línea o Css interno o puede cargar su propio css externo según el order de ese css precargado, lo ayudará a anular ese css con el css personalizado.

  <html> <head> <!-- //First Solution //PreloaderCSS //YourCustomCSS //Second Solution Internal CSS --> </head> <body> <!-- Third solution //Inline CSS -> </body> </html> 

Puede usar la siguiente function:

 function replaceBGColorImportant(element,newColor){ var styles = element.getAttribute('style'); styles = styles?styles.split(';'):[]; var newStyles = []; styles.map(function(x){ if (x.split(':')[0] != "background-color") newStyles.push(x); }); newStyles.push('background-color:#'+newColor+' !important'); element.setAttribute('style',newStyles.join(';')); } 

Ejecute de la siguiente manera:

 replaceBGColorImportant(document.body,'#009922'); 

A través de la expresión regular: https://jsfiddle.net/7jj7gq3y/2/

HTML:

 <div class="elementToChange" style=" background-color: yellow !important; width: 100px; height: 100px;"></div> 

JavaScript:

 var setImportantStyle = function(element, attributeName, value) { var style = element.attr('style'); if (style === undefined) return; var re = new RegExp(attributeName + ": .* !important;", "g"); style = style.replace(re, ""); element.css('cssText', attributeName + ': ' + value + ' !important;' + style); } setImportantStyle($('.elementToChange'), 'background-color', 'networking');