Wie wendet man !important mit .css() an?

Question

Ich habe Probleme bei der Anwendung eines Stils, der !important . Ich habe es versucht:

$("#elem").css("width", "100px !important");

Dies bedeutet nichts ; keine Breite Stil überhaupt angewendet wird. Gibt es eine jQuery-ish Weise der Anwendung eines solchen Stils, ohne zu überschreiben cssText (was bedeuten würde, dass ich sie zuerst parsen müsste usw.)?

Editar : Ich sollte hinzufügen, dass ich ein Stylesheet mit einem !important Stil, den ich versuche, mit einer !important Stil inline, also mit .width() und dergleichen funktioniert nicht, da sie von meiner externen Software überschrieben wird. !important Stil.

Außerdem wird der Wert, der den vorherigen Wert überschreibt wird errechnet Ich kann also nicht einfach einen anderen externen Stil erstellen.

Answer 1

Gehen Sie folgendermaßen vor:

$("#elem").get(0).style.width= "100px!important";

Answer 2

Bei dieser Lösung wird das gesamte berechnete Javascript belassen und der wichtige Tag in das Element eingefügt: Sie können Folgendes tun (z. B. wenn Sie die Breite mit dem wichtigen Tag festlegen müssen)

$('exampleDiv').css('width', '');
//This will remove the width of the item
var styles = $('exampleDiv').attr('style');
//This will contain all styles in your item
//ex: height:auto; display:block;
styles += 'width: 200px !important;'
//This will add the width to the previous styles
//ex: height:auto; display:block; width: 200px !important;
$('exampleDiv').attr('style', styles);
//This will add all previous styles to your item

Answer 3

Drei Arbeitsbeispiele

Ich hatte eine ähnliche Situation, aber ich habe .find() verwendet, nachdem ich lange Zeit mit .closest() mit vielen Variationen zu kämpfen hatte.

Der Beispielcode

// Allows contain functions to work, ignores case sensitivity

jQuery.expr[':'].contains = function(obj, index, meta, stack) {
    result = false;
    theList = meta[3].split("','");
    var contents = (obj.textContent || obj.innerText || jQuery(obj).text() || '')
    for (x=0; x<theList.length; x++) {
        if (contents.toLowerCase().indexOf(theList[x].toLowerCase()) >= 0) {
            return true;
        }
    }
    return false;
};

$(document).ready(function() {
    var refreshId = setInterval( function() {
        $("#out:contains('foo', 'test456')").find(".inner").css('width', '50px', 'important');
    }, 1000); // Rescans every 1000 ms
});

Alternative

$('.inner').each(function () {
    this.style.setProperty('height', '50px', 'important');
});

$('#out').find('.inner').css({ 'height': '50px'});

Arbeiten: http://jsfiddle.net/fx4mbp6c/

Answer 4

Das mag für Ihre Situation angemessen sein oder auch nicht, aber Sie können CSS-Selektoren für viele dieser Arten von Situationen verwenden.

Wenn Sie z.B. möchten, dass die 3. und 6. Instanz von .cssText eine unterschiedliche Breite haben, könnten Sie schreiben:

.cssText:nth-of-type(3), .cssText:nth-of-type(6) {width:100px !important;}

Oder:

.container:nth-of-type(3).cssText, .container:nth-of-type(6).cssText {width:100px !important;}

Answer 5

Wir können setProperty oder cssText verwenden, um Folgendes hinzuzufügen !important zu einem DOM-Element mit JavaScript.

Beispiel 1:

elem.style.setProperty ("color", "green", "important");

Beispiel 2:

elem.style.cssText='color: red !important;'