Ich habe Probleme, einen Stil anzuwenden, der ist !important. Ich habe es versucht:

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

Das macht nichts ; Es wird keinerlei Breitenstil angewendet. Gibt es eine jQuery-artige Möglichkeit, einen solchen Stil anzuwenden, ohne ihn überschreiben zu müssen cssText(was bedeuten würde, dass ich ihn zuerst analysieren müsste usw.)?

Bearbeiten : Ich sollte hinzufügen, dass ich ein Stylesheet mit einem !importantStil habe, den ich mit einem !importantStil inline überschreiben .width()möchte. Daher funktioniert die Verwendung und dergleichen nicht, da sie von meinem externen !importantStil überschrieben wird .

Außerdem wird der Wert berechnet , der den vorherigen Wert überschreibt , sodass ich nicht einfach einen anderen externen Stil erstellen kann.

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

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

.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 vorsichtig verwenden.

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

Der obige attr()Ansatz wurde geringfügig geändert, um die ursprüngliche styleZeichenfolge / Eigenschaften beizubehalten , und wie von falko in einem Kommentar vorgeschlagen geändert :

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

Ich denke, ich habe eine echte Lösung gefunden. Ich habe es zu einer neuen Funktion gemacht:

jQuery.style(name, value, priority);

Sie können es verwenden, um Werte mit .style('name')genau wie zu erhalten.css('name') , erhalten Sie die CSSStyleDeclaration mit.style() und auch Werte festzulegen - mit der Möglichkeit, die Priorität als 'wichtig' anzugeben. Sehen Sie das .

Demo

var div = $('someDiv');
console.log(div.style('color'));
div.style('color', 'red');
console.log(div.style('color'));
div.style('color', 'blue', 'important');
console.log(div.style('color'));
console.log(div.style().getPropertyPriority('color'));

Hier ist die Ausgabe:

null
red
blue
important

Die Funktion

(function($) {    
  if ($.fn.style) {
    return;
  }

  // Escape regex chars with \
  var escape = function(text) {
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
  };

  // For those who need them (< IE 9), add support for CSS functions
  var isStyleFuncSupported = !!CSSStyleDeclaration.prototype.getPropertyValue;
  if (!isStyleFuncSupported) {
    CSSStyleDeclaration.prototype.getPropertyValue = function(a) {
      return this.getAttribute(a);
    };
    CSSStyleDeclaration.prototype.setProperty = function(styleName, value, priority) {
      this.setAttribute(styleName, value);
      var priority = typeof priority != 'undefined' ? priority : '';
      if (priority != '') {
        // Add priority manually
        var rule = new RegExp(escape(styleName) + '\\s*:\\s*' + escape(value) +
            '(\\s*;)?', 'gmi');
        this.cssText =
            this.cssText.replace(rule, styleName + ': ' + value + ' !' + priority + ';');
      }
    };
    CSSStyleDeclaration.prototype.removeProperty = function(a) {
      return this.removeAttribute(a);
    };
    CSSStyleDeclaration.prototype.getPropertyPriority = function(styleName) {
      var rule = new RegExp(escape(styleName) + '\\s*:\\s*[^\\s]*\\s*!important(\\s*;)?',
          'gmi');
      return rule.test(this.cssText) ? 'important' : '';
    }
  }

  // The style function
  $.fn.style = function(styleName, value, priority) {
    // DOM node
    var node = this.get(0);
    // Ensure we have a DOM node
    if (typeof node == 'undefined') {
      return this;
    }
    // CSSStyleDeclaration
    var style = this.get(0).style;
    // Getter/Setter
    if (typeof styleName != 'undefined') {
      if (typeof value != 'undefined') {
        // Set style property
        priority = typeof priority != 'undefined' ? priority : '';
        style.setProperty(styleName, value, priority);
        return this;
      } else {
        // Get style property
        return style.getPropertyValue(styleName);
      }
    } else {
      // Get CSSStyleDeclaration
      return style;
    }
  };
})(jQuery);

Sehen Sie dies für Beispiele dafür , wie die CSS - Werte zu lesen und setzen. Mein Problem war, dass ich bereits !importantdie Breite in meinem CSS festgelegt hatte, um Konflikte mit anderen Themen-CSS zu vermeiden. Änderungen, die ich an der Breite in jQuery vorgenommen habe, blieben jedoch unberührt, da sie dem Stilattribut hinzugefügt wurden.

Kompatibilität

Für die Einstellung mit der Priorität mithilfe der setPropertyFunktion wird in diesem Artikel angegeben , dass IE 9+ und alle anderen Browser unterstützt werden. Ich habe es mit IE 8 versucht und es ist fehlgeschlagen, weshalb ich in meinen Funktionen Unterstützung dafür aufgebaut habe (siehe oben). Es funktioniert in allen anderen Browsern mit setProperty, benötigt jedoch meinen benutzerdefinierten Code, um in <IE 9 zu funktionieren.

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

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

Für Kommentare aktualisiert: Sie haben auch diese Option, aber sie ersetzt alle CSS-Elemente des Elements. Sie sind sich also nicht sicher, ob sie praktikabler sind:

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

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

Hinweis: Bei Verwendung von Chrome wird möglicherweise ein Fehler zurückgegeben, z.

elem [0] .style.removeAttribute ist keine Funktion

Ändern der Zeile, um die .removePropertyFunktion zum elem[0].style.removeProperty('width');Beheben des Problems zu verwenden.

Die Antwort von David Thomas beschreibt eine Verwendung$('#elem').attr('style', …) , warnt jedoch davor, dass bei Verwendung zuvor festgelegte Stile im styleAttribut 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 dies 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 alles, was Sie dem CSS als Wert hinzufügen möchten.

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 ist nicht erforderlich, auf die Komplexität der Antwort von @ AramKocharyan einzugehen oder Stil-Tags dynamisch einzufügen.

Überschreiben Sie einfach den Stil, aber Sie müssen nichts analysieren. Warum sollten Sie das tun?

// 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' : '') + ';');
}

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

Sie könnten dies wahrscheinlich mit jQuery verkürzen, aber diese Vanille-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');

Diese Lösung überschreibt keinen der vorherigen Stile, sondern wendet nur den gewünschten 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);
}

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

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

Und in Ihrem CSS:

#cheaterId { width: 100px;}

Anstatt die css()Funktion zu verwenden, versuchen Sie die addClass()Funktion:

  <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 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;
}

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

Die meisten dieser Antworten sind mittlerweile veraltet. Die IE7-Unterstützung ist kein Problem.

Der beste Weg, dies zu tun, der IE11 + und alle modernen Browser unterstützt, ist:

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

Wenn Sie möchten, können Sie auch ein kleines jQuery-Plugin erstellen, das dies tut. Dieses Plugin stimmt css()in den unterstützten Parametern eng mit der eigenen Methode von jQuery überein :

/**
 * Sets a CSS style on the selected element(s) with !important priority.
 * This supports camelCased CSS style property names and calling with an object 
 * like the jQuery `css()` method. 
 * Unlike jQuery's css() this does NOT work as a getter.
 * 
 * @param {string|Object<string, string>} name
 * @param {string|undefined} value
 */   
jQuery.fn.cssImportant = function(name, value) {
  const $this = this;
  const applyStyles = (n, v) => {
    // Convert style name from camelCase to dashed-case.
    const dashedName = n.replace(/(.)([A-Z])(.)/g, (str, m1, upper, m2) => {
      return m1 + "-" + upper.toLowerCase() + m2;
    }); 
    // Loop over each element in the selector and set the styles.
    $this.each(function(){
      this.style.setProperty(dashedName, v, 'important');
    });
  };
  // If called with the first parameter that is an object,
  // Loop over the entries in the object and apply those styles. 
  if(jQuery.isPlainObject(name)){
    for(const [n, v] of Object.entries(name)){
       applyStyles(n, v);
    }
  } else {
    // Otherwise called with style name and value.
    applyStyles(name, value);
  }
  // This is required for making jQuery plugin calls chainable.
  return $this;
};

// Call the new plugin:
$('#elem').cssImportant('height', '100px');

// Call with an object and camelCased style names:
$('#another').cssImportant({backgroundColor: 'salmon', display: 'block'});

// Call on multiple items:
$('.item, #foo, #bar').cssImportant('color', 'red');

Beispiel jsfiddle hier .

Wir müssen zuerst den vorherigen Stil entfernen. Ich entferne es mit einem regulären Ausdruck. Hier ist ein Beispiel zum Ä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 im Kopf anzuhängen:

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

Dadurch wird der Stil nach all Ihren CSS-Dateien angehängt, sodass er eine höhere Priorität als andere CSS-Dateien hat und angewendet wird.

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');

Entfernen Sie CSS

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

Ich denke, es funktioniert in Ordnung und kann jedes andere CSS vorher überschreiben (dies: DOM-Element):

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

Mach es so:

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

Diese Lösung belässt das gesamte berechnete Javascript und fügt dem Element das wichtige Tag hinzu: Sie können Folgendes tun (Beispiel: 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

Drei Arbeitsbeispiele

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

Es kann für Ihre Situation geeignet sein oder auch 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;}

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

Inline-CSS (mit dem JavaScript das Styling hinzufügt) überschreibt das Stylesheet-CSS. Ich bin mir ziemlich sicher, dass dies auch dann der Fall ist, wenn die Stylesheet-CSS-Regel dies tut !important.

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;?

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

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

Beispiel 1:

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

Beispiel 2:

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

Ich habe auch festgestellt, dass bestimmte Elemente oder Add-Ons (wie Bootstrap) einige spezielle Klassenfälle haben, in denen sie nicht gut !importantfunktionieren, oder andere Workarounds wie .addClass/.removeClass, und daher müssen Sie sie ein- und ausschalten.

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

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

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

Ich hatte das gleiche Problem beim Versuch, eine Textfarbe eines Menüelements 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 addClass-Methode wie folgt an:

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

Problem gelöst.

Die sicherste Problemumgehung besteht darin, eine Klasse hinzuzufügen und dann die Magie in CSS auszuführen :-) addClass()und removeClass()sollte die Arbeit erledigen.

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

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