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 habe folgendes getan, nachdem ich auf dieses Problem gestoßen bin...

var origStyleContent = jQuery('#logo-example').attr('style');
jQuery('#logo-example').attr('style', origStyleContent + ';width:150px !important');

Answer 2

Diese Lösung setzt keinen der vorherigen Stile außer Kraft, sondern wendet nur den von Ihnen benötigten an:

var heightStyle = "height: 500px !important";
if ($("foo").attr('style')) {
  $("foo").attr('style', heightStyle + $("foo").attr('style').replace(/^height: [-,!,0-9,a-z, A-Z, ]*;/,''));
else {
  $("foo").attr('style', heightStyle);
}

Answer 3

Die einfachste und beste Lösung für dieses Problem war für mich, einfach addClass() anstelle von .css() oder .attr() zu verwenden.

Zum Beispiel:

$('#elem').addClass('importantClass');

Und in Ihrer CSS-Datei:

.importantClass {
    width: 100px !important;
}

Answer 4

Wenn es nicht so relevant ist und da es sich um ein Element handelt, das #elem können Sie die ID in etwas anderes ändern und sie nach Ihren Wünschen gestalten...

$('#elem').attr('id', 'cheaterId');

Und in Ihrem CSS:

#cheaterId { width: 100px;}

Answer 5

Anstelle der Verwendung des css() Funktion versuchen Sie die addClass() Funktion:

  <script>
  $(document).ready(function() {
    $("#example").addClass("exampleClass");
  });
  </script>

  <style>
  .exampleClass{
    width:100% !important;
    height:100% !important;
  }
  </style>