Reading max-width, cross-browser
There are 5 basic ways to access max-width
element.currentStyle["max-width"]
(IE 6, 9, 10)element.currentStyle.maxWidth
(IE 7, 8, 9, 10 & Opera only)window.getComputedStyle(element,null)["max-width"]
(IE 9, 10, Chrome & Webkit)window.getComputedStyle(element,null).maxWidth
(IE 9, 10, Firefox, Opera, Chrome & Webkit)window.getComputedStyle(element,null).getPropertyValue("max-width")
(IE 9, 10, Firefox, Opera, Chrome & Webkit)
Test results
All BrowserStack browsers were tested for all methods. If a method is not listed, it returned undefined.
Browser | method | max-width: 20px | max-width: 20% | max-width: 2em | max-width: 1cm | max-width: 1in |
---|---|---|---|---|---|---|
IE6 | currentStyle["max-width"] | 20px | 20% | 2em | 1cm | 1in |
IE7-IE8 | currentStyle.maxWidth | 20px | 20% | 2em | 1cm | 1in |
IE9-IE10 | getComputedStyle["max-width"] | 20px | 201.6px | 32px | 37.79px | 96px |
IE9-IE10 | getPropertyValue("max-width") | 20px | 201.6px | 32px | 37.79px | 96px |
IE9-IE10 | getComputedStyle.maxWidth | 20px | 201.6px | 32px | 37.79px | 96px |
IE9-IE10 | currentStyle["max-width"] | 20px | 20% | 2em | 1cm | 1in |
IE9-IE10 | currentStyle.maxWidth | 20px | 20% | 2em | 1cm | 1in |
Firefox 3.6-23 | getComputedStyle.maxWidth | 20px | 201.6px | 32px | 37.8px | 96px |
Firefox 3.6-23 | .getPropertyValue("max-width") | 20px | 201.6px | 32px | 37.8px | 96px |
Opera 11.6-12.15 | getComputedStyle.maxWidth | 20px | 201px | 32px | 38px | 96px |
Opera 11.6-12.15 | .getPropertyValue("max-width") | 20px | 201px | 32px | 38px | 96px |
Opera 11.6-12.15 | currentStyle.maxWidth | 20px | 20% | 2em | 1cm | 1in |
Chrome 25-28 (win, osx) | getComputedStyle["max-width"] | 20px | 20% | 32px | 37.7952766418457px | 96px |
Chrome 25-28 (win, osx) | .getPropertyValue("max-width") | 20px | 20% | 32px | 37.7952766418457px | 96px |
Chrome 25-28 (win, osx) | getComputedStyle.maxWidth | 20px | 20% | 32px | 37.7952766418457px | 96px |
All other webkit | getComputedStyle["max-width"] | 20px | 20% | 32px | 37px | 96px |
All other webkit | .getPropertyValue("max-width") | 20px | 20% | 32px | 37px | 96px |
All other webkit | getComputedStyle.maxWidth | 20px | 20% | 32px | 37px | 96px |
The test page can be found here.
All other webkit browsers tested:
- Chrome 14-19, OS X & Windows
- Safari 5.1 & 6 (all platforms)
- iPad 2, iPhone 4S, iPhone 5, iPad 3, iPad mini (Mobile Safari 5, 5.1, 6)
- Amazon Kindle Fire 2, Kindle Fire HD 8.9
- Motorola Droid 4, Razr, Razr Maxx HD, Atrix HD,
- Samsung Galaxy S, S II, Note, S II, Note II, Tab 2 10.1, Note 10.1, Nexus,
- Google Nexus 7
- HTC Wildfire, Evo 3D, One X
- LG Nexus 4, Optimus 3D
- Sony Xperia Topo
Additional notes
Firefox 3.6 requires you specifiy null (or a psuedoselector) as the second parameter of getComputedStyle.
I tested getFloatValue, but found it highly inconsistent. It's also designed to throw errors on percentages and non-convertible units. It only operates smoothly under Firefox.
window.getComputedStyle(element,null).getPropertyCSSValue("max-width").getFloatValue(5)
Getting a max-width value (cross-browser)
Both window.getComputedStyle(element,null).maxWidth
and window.getComputedStyle(element,null).getPropertyValue("max-width")
are supported identically by all the browsers I tested. It's your pick on which to use.
You can fall back to currentStyle.maxWidth
for IE 7/8, and finally currentStyle["max-width"]
for IE6.
The following code returns values on all the browsers tested above. We ran it on DomContentReady, load, or onload, depending on browser support.
var getCssValue = function(target, hyphenProp){
var val = typeof(window.getComputedStyle) != "undefined" && window.getComputedStyle(target, null).getPropertyValue(hyphenProp);
if (!val && target.currentStyle){
val = target.currentStyle[hyphenProp.replace(/([a-z])\-([a-z])/, function(a,b,c){ return b + c.toUpperCase();})] || target.currentStyle[hyphenProp];
}
return val;
};
Converting all CSS width units into pixels (cross-browser)
If you only support IE9 and higher, you can get by with parsing only pixels and percentages. For IE6-8, you'll need to implement parsing for all units you wish to support, as there's no conversion provided for you.
Evaluating percentages for max-width is tricky, as every css property has slightly different rules for the evaluation, and it is highly dependent on layout context.
Thankfully, there's a pretty straightforward way to convert units in context. It won't handle absolute positioning and some other edge cases, but that could be added without too much fuss.
var getCssPixels = function(target, hyphenProp){
var val = getCssValue(target,hyphenProp);
//We can return pixels directly, but not other units
if (val.slice(-2) == "px") return parseFloat(val.slice(0,-2));
//Create a temporary sibling div to resolve units into pixels.
var temp = document.createElement("div");
temp.style.overflow = temp.style.visibility = "hidden";
target.parentNode.appendChild(temp);
temp.style.width = val;
var pixels = temp.offsetWidth;
target.parentNode.removeChild(temp);
return pixels;
};
Here's the test page showing these 2 functions operating on all the browsers mentioned above