Ich glaube, ich habe eine Lösung gefunden. Ich habe es zu einer neuen Funktion gemacht:
jQuery.style(name, value, priority);
Sie können es verwenden, um Werte zu erhalten mit .style('name') genau wie .css('name') erhalten die CSSStyleDeclaration con .style() und auch Werte setzen, mit der Möglichkeit, die Priorität als wichtig . Siehe ce .
Beispiel
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'));
Beispielhafte 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);
Siehe ce für Beispiele, wie die CSS-Werte gelesen und eingestellt werden können. Mein Problem war, dass ich bereits Folgendes eingestellt hatte !important für die Breite in meinem CSS, um Konflikte mit anderen Theme-CSS zu vermeiden, aber alle Änderungen, die ich in jQuery an der Breite vorgenommen habe, würden davon unberührt bleiben, da sie dem style-Attribut hinzugefügt werden würden.
Kompatibilität
Für die Einstellung mit der Priorität über die setProperty Funktion, Dieser Artikel sagt, dass es Unterstützung für IE 9+ und alle anderen Browser gibt. Ich habe es mit IE 8 versucht und es ist fehlgeschlagen, weshalb ich in meinen Funktionen Unterstützung dafür eingebaut habe (siehe oben). Bei allen anderen Browsern funktioniert es mit setProperty aber es braucht meinen eigenen Code, um im IE 9 zu funktionieren.
