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

Ich nehme an, Sie haben es ohne Zusatz von !important ?

Inline-CSS (wie JavaScript Styling hinzufügt) setzt das Stylesheet-CSS außer Kraft. Ich bin mir ziemlich sicher, dass das der Fall ist, auch wenn die Stylesheet-CSS-Regel !important .

Eine weitere Frage (vielleicht eine dumme Frage, aber sie muss gestellt werden): Ist das Element, an dem Sie arbeiten wollen display:block; o display:inline-block; ?

Da ich nicht weiß, wie gut Sie sich mit CSS auskennen... Inline-Elemente verhalten sich nicht immer so, wie man es erwarten würde.

Answer 2

Ich habe auch entdeckt, dass bestimmte Elemente oder Add-Ons (wie Bootstrap) einige spezielle Klassen haben, bei denen sie nicht gut mit !important oder andere Umgehungsmöglichkeiten wie .addClass/.removeClass und müssen daher ein- und ausgeschaltet werden.

Wenn Sie zum Beispiel etwas verwenden wie <table class="table-hover"> die einzige Möglichkeit, Elemente wie die Farben der Zeilen zu ändern, ist das Umschalten der table-hover Klasse ein/aus, etwa so

$(your_element).closest("table").toggleClass("table-hover");

Hoffentlich ist diese Lösung für jemanden hilfreich! :)

Answer 3

Ich hatte das gleiche Problem, als ich versuchte, die Textfarbe eines Menüeintrags bei "Ereignis" zu ändern. Der beste Weg, den ich fand, als ich das gleiche Problem hatte, war:

Erster Schritt: Erstellen Sie in Ihrem CSS eine neue Klasse mit diesem Zweck, zum Beispiel:

.colorw{ color: white !important;}

Letzter Schritt: Wenden Sie diese Klasse mit der Methode addClass wie folgt an:

$('.menu-item>a').addClass('colorw');

Problem gelöst.

Answer 4

Die sicherste Abhilfe ist, eine Klasse hinzuzufügen und dann die Magie in CSS zu tun :-), addClass() y removeClass() sollte die Arbeit machen.

Answer 5

https://jsfiddle.net/xk6Ut/256/

Ein alternativer Ansatz ist die dynamische Erstellung und Aktualisierung von CSS-Klassen in JavaScript. Dazu können wir ein Stilelement verwenden und müssen die ID für das Stilelement einsetzen, damit wir die CSS-Klasse aktualisieren können

function writeStyles(styleName, cssText) {
    var styleElement = document.getElementById(styleName);
    if (styleElement) document.getElementsByTagName('head')[0].removeChild(
        styleElement);
    styleElement = document.createElement('style');
    styleElement.type = 'text/css';
    styleElement.id = styleName;
    styleElement.innerHTML = cssText;
    document.getElementsByTagName('head')[0].appendChild(styleElement);
}

...

  var cssText = '.testDIV{ height:' + height + 'px !important; }';
  writeStyles('styles_js', cssText)