Wie bewerbe ich mich! Important mit .css ()?

Das Problem wird dadurch verursacht, dass jQuery das !important -Attribut nicht versteht und die Regel daher nicht anwendet.

Möglicherweise können Sie dieses Problem umgehen und die Regel anwenden, indem Sie mit addClass() darauf verweisen:

.importantRule { width: 100px !important; }

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

Oder mit attr():

$('#elem').attr('style', 'width: 100px !important');

Der letztere Ansatz würde jedoch alle zuvor festgelegten Inline-Stilregeln aufheben. Also mit Vorsicht anwenden.

Natürlich gibt es ein gutes Argument dafür, dass die Methode von @Nick Craver einfacher/weiser ist.

Der obige Ansatz von attr() wurde leicht modifiziert, um die ursprünglichen style Zeichenfolgen/Eigenschaften beizubehalten:

$('#elem').attr('style', function(i,s) { return s + 'width: 100px !important;' });

Sie können die Breite direkt mit .width() wie folgt einstellen:

$("#elem").width(100);

Aktualisiert für Kommentare: Sie haben diese Option ebenfalls, aber sie ersetzt alle CSS-Dateien auf dem Element.

$('#elem').css('cssText', 'width: 100px !important');

var elem = $("#elem");
elem[0].style.removeAttribute('width');
elem[0].style.setProperty('width', '100px', 'important');

David Thomas 'Antwort beschreibt eine Methode zur Verwendung von $('#elem').attr('style', …), warnt jedoch davor, dass zuvor festgelegte Stile im Attribut style gelöscht werden. Hier ist eine Möglichkeit, attr() ohne dieses Problem zu verwenden:

var $elem = $('#elem');
$elem.attr('style', $elem.attr('style') + '; ' + 'width: 100px !important');

Als eine Funktion:

function addStyleAttribute($element, styleAttribute) {
    $element.attr('style', $element.attr('style') + '; ' + styleAttribute);
}

addStyleAttribute($('#elem'), 'width: 100px !important');

Hier ist eine JS Bin Demo .

Nachdem ich andere Antworten gelesen und experimentiert habe, funktioniert das für mich:

$(".selector")[0].style.setProperty( 'style', 'value', 'important' );

Dies funktioniert jedoch nicht in IE 8 und darunter.

Du kannst das:

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

Verwenden Sie "cssText" als Eigenschaftsnamen und fügen Sie dem CSS den gewünschten Wert hinzu.

Sie können dies auf zwei Arten erreichen:

$("#elem").prop("style", "width: 100px !important"); // this is not supported in chrome
$("#elem").attr("style", "width: 100px !important");

Es besteht keine Notwendigkeit, sich mit der Komplexität von @ AramKocharyans Antwort zu befassen und keine Stil-Tags dynamisch einzufügen.

Überschreiben Sie einfach den Stil, , aber Sie müssen nichts analysieren, warum sollten Sie?

// Accepts the hyphenated versions (i.e. not 'cssFloat')
function addStyle(element, property, value, important) {
    // Remove previously defined property
    if (element.style.setProperty)
        element.style.setProperty(property, '');
    else
        element.style.setAttribute(property, '');

    // Insert the new style with all the old rules
    element.setAttribute('style', element.style.cssText +
        property + ':' + value + ((important) ? ' !important' : '') + ';');
}

_{removeProperty() kann nicht verwendet werden, da !important Regeln in Chrome nicht entfernt werden.
Kann element.style[property] = '' nicht verwenden, da nur camelCase in Firefox akzeptiert wird.}

Sie könnten dies wahrscheinlich mit jQuery verkürzen, aber diese Vanilla-Funktion wird in modernen Browsern, Internet Explorer 8 usw. ausgeführt.

Folgendes habe ich 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');

Wenn es nicht so relevant ist und Sie es mit einem Element zu tun haben, das #elem ist, können Sie seine ID in etwas anderes ändern und es nach Ihren Wünschen stylen ...

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

Und in deinem CSS:

#cheaterId { width: 100px;}

Diese Lösung überschreibt keinen der vorherigen Stile, 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);
}

Verwenden Sie statt der Funktion css() die Funktion addClass():

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

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

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

Zum Beispiel:

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

Und in Ihrer CSS-Datei:

.importantClass {
    width: 100px !important;
}

Zu Ihrer Information, es funktioniert nicht, weil jQuery es nicht unterstützt. 2012 wurde ein Ticket eingereicht ( # 11173 $ (elem) .css ("property", "value! Important") failed ), das schließlich als WONTFIX geschlossen wurde.

Vielleicht sieht es so aus:

Zwischenspeicher

var node = $ ('. selector') [0]; 
 ODER 
 var node = document.querySelector ('. selector'); 

Stellen Sie CSS ein

node.style.setProperty ('width', '100px', 'important');

CSS entfernen

node.style.removeProperty ('width'); 
 ODER 
 node.style.width = '';

Wir müssen zuerst den vorherigen Stil entfernen. Ich entferne es mit einem regulären Ausdruck. Hier ist ein Beispiel für das Ändern der Farbe:

var SetCssColorImportant = function (jDom, color) {
       var style = jDom.attr('style');
       style = style.replace(/color: .* !important;/g, '');
       jDom.css('cssText', 'color: ' + color + ' !important;' + style); }

Eine alternative Möglichkeit, Stil in den Kopf einzufügen:

$('head').append('<style> #Elm{width:150px !important} </style>');

Hiermit wird der Stil nach allen Ihren CSS-Dateien angehängt, sodass diese eine höhere Priorität als andere CSS-Dateien haben und angewendet werden.

Ich denke, es funktioniert OK und kann jedes andere CSS vorher überschreiben (dieses: DOM-Element):

this.setAttribute('style', 'padding:2px !important');

Diese Lösung belässt das gesamte berechnete Javascript und fügt das wichtige Tag in das Element ein:

$('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

Mach es so:

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

Drei Arbeitsbeispiele

Ich hatte eine ähnliche Situation, aber ich habe .find () verwendet, nachdem ich lange 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/

Ich würde annehmen, Sie haben es versucht, ohne !important hinzuzufügen?

Inline-CSS (so fügt JavaScript das Styling hinzu) überschreibt das Stylesheet-CSS. Ich bin mir ziemlich sicher, dass dies auch dann der Fall ist, wenn die CSS-Regel des Stylesheets !important enthält.

Eine andere Frage (vielleicht eine dumme Frage, die aber gestellt werden muss): Ist das Element, an dem Sie arbeiten möchten, display:block; oder display:inline-block;?

Wenn Sie Ihre Kenntnisse in CSS nicht kennen ... verhalten sich Inline-Elemente nicht immer so, wie Sie es erwarten würden.

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

Beispiel 1:

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

Beispiel 2:

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

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

Wenn Sie beispielsweise möchten, dass die 3. und 6. Instanz von .cssText eine andere Breite haben, können Sie Folgendes 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;}

Die sicherste Lösung dafür ist, eine Klasse hinzuzufügen und dann die Magie in CSS auszuführen :-), addClass() und removeClass() sollten die Arbeit erledigen.

Ich hatte das gleiche Problem beim Versuch, die Textfarbe eines Menüpunktes bei "event" zu ändern. Der beste Weg, den ich gefunden habe, als ich das gleiche Problem hatte, war:

Erster Schritt: Erstellen Sie in Ihrem CSS eine neue Klasse zu 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.

Ich habe auch festgestellt, dass bestimmte Elemente oder Add-Ons (wie Bootstrap) spezielle Klassenfälle aufweisen, in denen sie nicht gut mit !important oder anderen Workarounds wie .addClass/.removeClass funktionieren, und daher muss umgeschaltet werden sie ein/aus.

Wenn Sie beispielsweise etwas wie <table class="table-hover"> verwenden, können Sie Elemente wie die Farben von Zeilen nur erfolgreich ändern, indem Sie die Klasse table-hover wie folgt ein- und ausschalten

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

Hoffentlich ist diese Umgehung für jemanden hilfreich! :)

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

Ein alternativer Ansatz ist das dynamische Erstellen und Aktualisieren von CSS-Klassen in JavaScript. Dazu können wir das style-Element verwenden und müssen die ID für das style-Element verwenden, 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)