Is there a way to enhance this solution for compatibility with IE6 and IE7?
http://jsfiddle.net/kirkstrobeck/sDh7s/1/
Referenced from this discussion
After some research, I have come up with a practical solution. I've converted it into a new function:
jQuery.style(name, value, priority);This function allows you to retrieve values using .style('name') similar to .css('name'), obtain the CSSStyleDeclaration with .style(), and set values - including specifying 'important' as the priority. Check out https://developer.mozilla.org/en/DOM/CSSStyleDeclaration for more information.
Sample
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'));
Here is the displayed output:
null
red
blue
important
The Function
// Supporting CSS functions for browsers below IE 9
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 != '') {
// Manually add priority
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' : '';
}
}
// Escaping regex characters 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);
// Ensuring we are dealing with 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') {
// Setting style property
var priority = typeof priority != 'undefined' ? priority : '';
style.setProperty(styleName, value, priority);
} else {
// Getting style property
return style.getPropertyValue(styleName);
}
} else {
// Getting CSSStyleDeclaration
return style;
}
}
Consult https://developer.mozilla.org/en/DOM/CSSStyleDeclaration for examples on reading and setting CSS values. My issue arose because I had already applied !important for the width in my CSS to avoid clashes with other theme CSS. Any modifications I made to the width through jQuery were unaffected since they would be added to the style attribute.
Compatibility
Regarding setting with the priority using the setProperty function, according to , support is available for IE 9+ and all other browsers. Testing with IE 8 resulted in failure, hence I implemented support for it in my functions (as shown above). While it will function across all other browsers using setProperty, custom code is required for operation in < IE 9.