Есть ли способ сделать это решение совместимым с IE6 и IE7?
http://jsfiddle.net/kirkstrobeck/sDh7s/1/
Вытянут из этот вопрос
Думаю, я нашел реальное решение. Я ввел новую функцию:
jQuery.style(name, value, priority);
Вы можете использовать его для получения значений с помощью .style('name') точно так же, как .css('name'), получить CSSStyleDeclaration с помощью .style(), а также установить значения - с возможностью указать приоритет как "важный". См. https://developer.mozilla.org/en/DOM/CSSStyleDeclaration.
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'));
Здесь вывод:
null
red
blue
important
Функция
// For those who need them (< IE 9), add support for CSS functions
var isStyleFuncSupported = CSSStyleDeclaration.prototype.getPropertyValue != null;
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(RegExp.escape(styleName) + '\\s*:\\s*' + RegExp.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(RegExp.escape(styleName) + '\\s*:\\s*[^\\s]*\\s*!important(\\s*;)?', 'gmi');
return rule.test(this.cssText) ? 'important' : '';
}
}
// Escape regex chars with \
RegExp.escape = function(text) {
return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}
// The style function
jQuery.fn.style = function(styleName, value, priority) {
// DOM node
var node = this.get(0);
// Ensure we have a DOM node
if (typeof node == 'undefined') {
return;
}
// CSSStyleDeclaration
var style = this.get(0).style;
// Getter/Setter
if (typeof styleName != 'undefined') {
if (typeof value != 'undefined') {
// Set style property
var priority = typeof priority != 'undefined' ? priority : '';
style.setProperty(styleName, value, priority);
} else {
// Get style property
return style.getPropertyValue(styleName);
}
} else {
// Get CSSStyleDeclaration
return style;
}
}
См. https://developer.mozilla.org/en/DOM/CSSStyleDeclaration для примеров того, как читать и устанавливать значения CSS. Моя проблема заключалась в том, что я уже установил !important для ширины в моем CSS, чтобы избежать конфликтов с другими CSS темы, но любые изменения, которые я сделал для ширины в jQuery, не будут затронуты, поскольку они будут добавлены в атрибут стиля.
Совместимость
Для установки с приоритетом с помощью функции setProperty http://help.dottoro.com/ljdpsdnb.php говорится, что есть поддержка IE 9+ и всех других браузеров, Я попытался с IE 8, и он провалился, поэтому я создал поддержку для него в моих функциях (см. Выше). Он будет работать во всех других браузерах с использованием setProperty, но для этого потребуется мой пользовательский код для работы в < IE 9.