cambia colore di sfondo di div con jquery che ha un tag! Important

Utilizzo di un plug-in che richiama un file .jsp che utilizza il proprio foglio di stile ospitato esternamente (è un errore di inserimento - tenta di manipolarne l'aspetto). L'unico elemento che sto cercando di cambiare ha un! Importante tag su di esso, e io non riesco a cambiarlo ...cambia colore di sfondo di div con jquery che ha un tag! Important

ho cercato

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

inutilmente. Idee?

fonte

2012-05-20 elzi

Mostra anche quella parte di HTML. – NAVEED

Se '! Important' è stato dichiarato nel foglio di stile esterno, quell'impostazione sovrascriverà qualsiasi altra impostazione, indipendentemente dal normale ordine di specificità, a meno che gli stili successivi (più specifici) * dichiarino anche *! Important'. Per inciso, questa domanda potrebbe essere rilevante per te: http://stackoverflow.com/questions/2655925/jquery-css-applying-important-styles –

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

Sembra che nelle versioni più up-to-date di jQuery (almeno 1,7 .2 e successive) è possibile semplicemente impostare il css:

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

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

Nelle versioni precedenti di jQuery e Zepto si doveva cancellare il css prima:

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

e quindi reimpostare utilizzando:

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

O in una battuta:

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

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

risposta originale:

Nota: questo può essere una cattiva idea, in quanto sarà rimuovere eventuali altri stili inline

vorrei modificare l'attributo di stile direttamente

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

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

fonte

2012-05-20 14:28:26 RichardTowers

Anche se questo sarebbe splatare tutti gli stili già collegati all'elemento, che potrebbe essere una cattiva notizia. Penso che aggiungere una classe sia più sicuro. – RichardTowers

Questo ha funzionato, anche se @RichardTowers aveva ragione. Ha cancellato tutto (non è un problema, può ricreare). Grazie! – elzi

Ecco la soluzione:

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

L'idea è quella di aggiungere la classe:

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

fonte

2012-05-20 14:23:59

che ha quasi funzionato ... ecco uno screenshot: http://d.pr/i/qxPl la parte superiore è il foglio di stile esterno. sfondo: blu è quello che ho aggiunto con jquery. di seguito c'è qualcosa nel mio css che ha funzionato dal momento che il css esterno non aveva un tag! importante su quello. consiglio? – elzi

prova a caricare style.css dopo ybadge.css nel tuo html. Puoi farlo? –

È possibile utilizzare il follo funzione di 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(';')); 
}

Esegui come segue:

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

fonte

2014-08-12 13:14:37

Via espressione regolare: 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');

fonte

2016-05-11 00:31:40

È possibile manipolare!css importanti usando i seguenti passaggi, o puoi usare inline-css o Internal css oppure puoi caricare il tuo css esterno dopo l'ordine di quel css precaricato, ti aiuterà a sovrascrivere quel css con quello personalizzato.

<html> 
    <head> 
    <!-- 
    //First Solution 
    //PreloaderCSS 
    //YourCustomCSS 

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

fonte

2017-04-18 17:07:41

cambia colore di sfondo di div con jquery che ha un tag! Important

risposta

Problemi correlati