Мне кажется, я нашел реальное решение. Я сделал это в новую функцию:
jQuery.style(name, value, priority);
Вы можете использовать его для получения значений с .style('name'), как и .css('name'), для получения CSSStyleDeclaration с .style(), а также для установки значений - с возможностью указать приоритет как «важный». См. это .
Демо
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;
}
// 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);
См. this для примеров того, как читать и устанавливать значения CSS. Моя проблема заключалась в том, что я уже установил !important для ширины в своем CSS, чтобы избежать конфликтов с CSS другой темы, но на любые изменения, которые я внес в ширину в jQuery, это не повлияет, так как они будут добавлены в атрибут style.
Совместимость
Для настройки с приоритетом с использованием функции setProperty, В этой статье говорится, что есть поддержка IE 9+ и всех других браузеров. Я пытался с IE 8, и он потерпел неудачу, поэтому я встроил поддержку для своих функций (см. Выше). Он будет работать во всех других браузерах, использующих setProperty, но для работы в