跨浏览器（IE8-）getComputedStyle与Javascript？
由于IE8不支持getComputedStyle ，我们只能使用currentStyle 。 但是，它不会返回某些属性的实际“计算”值。
例如：
<style type="text/css"> #div {/* no properties are defined here */} </style>
<div id="div">div</div>
// returns "medium" instead of 0px document.getElementById('div').currentStyle.borderLeftWidth // returns "auto" instead of 0px document.getElementById('div').currentStyle.marginLeft // returns "undefined" instead of 1 document.getElementById('div').currentStyle.opacity
有没有人有没有使用jQuery或其他Javascript库的所有属性的跨浏览器解决scheme？
你不想使用jquery，但没有任何东西阻止你窥视代码，看看他们如何处理它:-)
里面的jQuery代码有一个参考关于这个评论这似乎（也阅读整篇文章）。 这是应该处理你的问题的jQuery代码：
else if ( document.documentElement.currentStyle ) { curCSS = function( elem, name ) { var left, rsLeft, ret = elem.currentStyle && elem.currentStyle[ name ], style = elem.style; // Avoid setting ret to empty string here // so we don't default to auto if ( ret == null && style && style[ name ] ) { ret = style[ name ]; } // From the awesome hack by Dean Edwards // http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102291 // If we're not dealing with a regular pixel number // but a number that has a weird ending, we need to convert it to pixels // but not position css attributes, as those are proportional to the parent element instead // and we can't measure the parent instead because it might trigger a "stacking dolls" problem if ( rnumnonpx.test( ret ) && !rposition.test( name ) ) { // Remember the original values left = style.left; rsLeft = elem.runtimeStyle && elem.runtimeStyle.left; // Put in the new values to get a computed value out if ( rsLeft ) { elem.runtimeStyle.left = elem.currentStyle.left; } style.left = name === "fontSize" ? "1em" : ret; ret = style.pixelLeft + "px"; // Revert the changed values style.left = left; if ( rsLeft ) { elem.runtimeStyle.left = rsLeft; } } return ret === "" ? "auto" : ret; }; }
这是一个跨浏览器function，以获得计算风格…
getStyle = function (el, prop) { if (typeof getComputedStyle !== 'undefined') { return getComputedStyle(el, null).getPropertyValue(prop); } else { return el.currentStyle[prop]; } }
您可以将其作为实用程序存储在对象中，也可以按照提供的方式使用它。 这里是一个示例演示！
// Create paragraph element and append some text to it var p = document.createElement('p'); p.appendChild(document.createTextNode('something for fun')); // Append element to the body document.getElementsByTagName('body')[0].appendChild(p); // Set hex color to this element p.style.color = '#999'; // alert element's color using getStyle function alert(getStyle(p, 'color'));
查看这个演示 ，看看它的实际运行情况：
getStyle = function(el, prop) { if (getComputedStyle !== 'undefined') { return getComputedStyle(el, null).getPropertyValue(prop); } else { return el.currentStyle[prop]; } } // Create paragraph element and append some text to it var p = document.createElement('p'); p.appendChild(document.createTextNode('something for fun')); // Append element to the body document.getElementsByTagName('body')[0].appendChild(p); // Set hex color to this element p.style.color = '#999'; // alert element's color using getStyle function console.log(getStyle(p, 'color'));
p { color: red; }
代替 ：
getComputedStyle !== 'undefined'
它应该是 ：
typeof getComputedStyle !== 'undefined'
否则它永远不会工作。
这将不适用于所有样式，但将适用于维度（这是我所需要的）。
不要试图猜测应用了什么样式，只需使用盒状元素四边中的每一个的像素位置来计算尺寸即可。 这也将回到IE 5和FF 3。
height = elem.getBoundingClientRect().bottom - elem.getBoundingClientRect().top; width = elem.getBoundingClientRect().right - elem.getBoundingClientRect().left;
另请参阅： getBoundingClientRect是真棒
如果这仍然不适合你，看看这个小提琴，我把它放在一起计算一个盒子的内部宽度。 它使用以下代码作为getComputedStyle的垫片：
/** * getComputedStyle function for IE8 * borrowed from: * http://missouristate.info/scripts/2013/common.js */ "getComputedStyle" in window || function() { function c(a, b, g, e) { var h = b[g]; b = parseFloat(h); h = h.split(/\d/)[0]; e = null !== e ? e : /%|em/.test(h) && a.parentElement ? c(a.parentElement, a.parentElement.currentStyle, "fontSize", null) : 16; a = "fontSize" == g ? e : /width/i.test(g) ? a.clientWidth : a.clientHeight; return "em" == h ? b * e : "in" == h ? 96 * b : "pt" == h ? 96 * b / 72 : "%" == h ? b / 100 * a : b; } function a(a, c) { var b = "border" == c ? "Width" : "", e = c + "Top" + b, h = c + "Right" + b, l = c + "Bottom" + b, b = c + "Left" + b; a[c] = (a[e] == a[h] == a[l] == a[b] ? [a[e]] : a[e] == a[l] && a[b] == a[h] ? [a[e], a[h]] : a[b] == a[h] ? [a[e], a[h], a[l]] : [a[e], a[h], a[l], a[b]]).join(" "); } function b(b) { var d, g = b.currentStyle, e = c(b, g, "fontSize", null); for (d in g) { /width|height|margin.|padding.|border.+W/.test(d) && "auto" !== this[d] ? this[d] = c(b, g, d, e) + "px" : "styleFloat" === d ? this["float"] = g[d] : this[d] = g[d]; } a(this, "margin"); a(this, "padding"); a(this, "border"); this.fontSize = e + "px"; return this; } b.prototype = {}; window.getComputedStyle = function(a) { return new b(a); }; }();
这对编辑来说太大了，所以这是一个答案，但是它并没有提供完整的答案。
加布里埃尔的答案失败，像"backgroundColor"或"background-color"的属性取决于浏览器版本，因为.getPropertyValue期望CSS属性名称和el.currentStyle[prop]需要骆驼案例版本。
这是一个固定的版本，总是期待骆驼案例版本：
function getStyle(el, prop) { return (typeof getComputedStyle !== 'undefined' ? getComputedStyle(el, null) : el.currentStyle )[prop]; // avoid getPropertyValue altogether }
