it-swarm.com.de

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

Ich habe Probleme, einen Stil anzuwenden, der !important lautet. 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 cssText überschreiben zu müssen (was bedeuten würde, dass ich ihn zuerst analysieren müsste usw.)?

Bearbeiten: Ich sollte hinzufügen, dass ich ein Stylesheet mit einem !important -Stil habe, das ich mit einem !important -Stil inline überschreiben möchte. Verwenden Sie dazu .width() und like funktioniert nicht, da es von meinem externen !important -Stil überschrieben wird.

Auch der Wert, der den vorherigen Wert überschreibt wird berechnet, so dass ich nicht einfach einen anderen externen Stil erstellen kann.

684
mkoryak

Ich denke, ich habe eine echte Lösung gefunden. Ich habe daraus eine neue Funktion gemacht:

jQuery.style(name, value, priority);

Sie können es verwenden, um Werte mit .style('name') abzurufen, genau wie .css('name'), die CSSStyleDeclaration mit .style() abzurufen und Werte festzulegen - mit der Möglichkeit, die Priorität als 'wichtig' festzulegen. Siehe this .

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

In this finden Sie Beispiele zum Lesen und Festlegen der CSS-Werte. Mein Problem war, dass ich bereits !important für die Breite in meinem CSS festgelegt hatte, um Konflikte mit anderem Design-CSS zu vermeiden. Alle Änderungen, die ich an der Breite in jQuery vorgenommen habe, waren jedoch nicht betroffen, da sie dem style-Attribut hinzugefügt wurden.

Kompatibilität

Zum Einstellen der Priorität mit der Funktion setProperty 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 eingebaut habe (siehe oben). Es funktioniert in allen anderen Browsern, die setProperty verwenden, aber es wird meinen benutzerdefinierten Code benötigen, um in <IE 9 zu funktionieren.

322
Aram Kocharyan

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;' });
561
David Thomas

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');
141
Nick Craver
var elem = $("#elem");
elem[0].style.removeAttribute('width');
elem[0].style.setProperty('width', '100px', 'important');
72
BettaSplendens

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 .

52
Rory O'Kane

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.

28
Nate

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.

23
hawkeye126

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");
18
kva

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.

14
Hashbrown

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

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

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);
}
9
Alain Beauvois

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>
8
user3778043

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;
}
8
Jack Fairfield

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.

7

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 = '';
6
SerzN1

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.

6
h0mayun

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

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

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
5

Mach es so:

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

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/

4
computerguy

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.

3
Dave Gregory

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;}
3
Tim Cutting

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.

2
Ryan S

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.

2
JoelBonetR

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! :)

2
Austin

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)
1
Razan Paul