cambiar el color de fondo de div con jquery que tiene una etiqueta! Important

Usar un complemento que llame a .jsp que usa su propia hoja de estilo alojada externamente (se trata de una incrustación de yelp, tratando de manipular su aspecto). El único elemento que estoy tratando de cambiar tiene una! Etiqueta importante en él, y me parece que no puede cambiarlo ...cambiar el color de fondo de div con jquery que tiene una etiqueta! Important

me trataron

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

en vano. Ideas?

Fuente

2012-05-20 elzi

Muestra esa parte de HTML también. – NAVEED

Si se ha declarado '! Important' en la hoja de estilo externa, esa configuración anulará cualquier otra configuración, independientemente del orden usual de especificidad, a menos que los estilos posteriores (más específicos) * también * declaren'! Important'. A propósito, esta pregunta puede ser relevante para usted: http://stackoverflow.com/questions/2655925/jquery-css-applying-important-styles –

http://stackoverflow.com/questions/462537/overriding-important-style- using-javascript – Faust

Parece que en las versiones más arriba-hasta la fecha de jQuery (al menos 1,7 .2 y superior) puede simplemente configurar el css:

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

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

En las versiones anteriores de jQuery y Zepto que tuvo que despejar el css primera:

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

Y luego reiniciarlo 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 se eliminarán todos los otros estilos en línea

Me editar el atributo de estilo directamente

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

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

Fuente

2012-05-20 14:28:26 RichardTowers

Aunque esto marcaría cualquier estilo ya asociado al elemento, lo que podría ser una mala noticia. Creo que agregar una clase es más seguro. – RichardTowers

Esto funcionó, aunque @RichardTowers tenía razón. Limpió todo (no es un problema, puede volver a crear). ¡Gracias! – elzi

Aquí está la solución:

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

La idea es añadir la clase:

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

Fuente

2012-05-20 14:23:59

que casi funcionó ... aquí hay una captura de pantalla: http://d.pr/i/qxPl la parte superior es la hoja de estilo externa. fondo: azul es lo que agregué con jquery. a continuación hay algo en mi CSS que funcionó, ya que el css externo no tenía una etiqueta importante sobre eso. consejos? – elzi

intenta cargar style.css después de ybadge.css en tu html. ¿Puedes hacer eso? –

Puede usar el siguiente función de ala:

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(';')); 
}

Ejecutar la siguiente manera:

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

Fuente

2014-08-12 13:14:37

Via 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', 'red');

Fuente

2016-05-11 00:31:40

¡Puede manipular!css importante 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 orden 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>

Fuente

2017-04-18 17:07:41

cambiar el color de fondo de div con jquery que tiene una etiqueta! Important

Respuesta

Cuestiones relacionadas