我认为我找到了一个解决方案。我将其制作成了一个新函数:
jQuery.style(name, value, priority);
您可以使用它来通过.style('name')
获取值,就像.css('name')
一样,使用.style()
获取CSSStyleDeclaration
,并且还可以设置值,还可以指定优先级为'important'。请参见此文档。
示例
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'));
输出示例:
null
red
blue
important
该函数
(function($) {
if ($.fn.style) {
return;
}
var escape = function(text) {
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
};
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 != '') {
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' : '';
}
}
$.fn.style = function(styleName, value, priority) {
var node = this.get(0);
if (typeof node == 'undefined') {
return this;
}
var style = this.get(0).style;
if (typeof styleName != 'undefined') {
if (typeof value != 'undefined') {
priority = typeof priority != 'undefined' ? priority : '';
style.setProperty(styleName, value, priority);
return this;
} else {
return style.getPropertyValue(styleName);
}
} else {
return style;
}
};
})(jQuery);
请参考这里的示例,了解如何读取和设置CSS值。我的问题是在CSS中已经为宽度设置了!important
以避免与其他主题CSS发生冲突,但是在jQuery中对宽度进行的任何更改都不会受到影响,因为它们将添加到样式属性中。
兼容性
对于使用setProperty
函数设置优先级的情况,这篇文章表示IE 9+和其他所有浏览器均支持。我已经尝试过IE 8,但失败了,这就是我在我的函数中构建它的原因(请参见上文)。它将适用于在< IE 9中使用setProperty
的所有其他浏览器,但需要我的自定义代码才能在< IE 9中工作。
.css
和!important
的问题。该错误被关闭为“不予修复”。然而,那个 bug 的测试用例并不像这个问题中的测试用例那样具有限制性——测试用例没有内联的!important
样式需要被覆盖。因此,在那个 bug 中提出的解决方法在这种情况下无法使用。 - Rory O'Kane