由于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库一个跨浏览器的解决方案？
你不想使用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;
};
}
下面是一个跨浏览器的功能得到计算样式...
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
}
