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.
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 .
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
(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.
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.
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:
var node = $ ('. selector') [0]; ODER var node = document.querySelector ('. selector');
node.style.setProperty ('width', '100px', 'important');
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";
Ich hatte eine ähnliche Situation, aber ich habe .find () verwendet, nachdem ich lange mit .closest () mit vielen Variationen zu kämpfen hatte.
// 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
});
$('.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)