该
element.style属性仅让您知道在该元素中定义为内联的CSS属性(以编程方式或在元素的style属性中定义),应该获取计算出的style。
以跨浏览器的方式进行操作并非易事,IE通过该
element.currentStyle属性具有自己的方式,而其他浏览器通过该方法实现的DOM Level
2 标准 方式
document.defaultView.getComputedStyle。
这两种方法有差异,例如,在IE
element.currentStyle属性期待您访问的两个或多个单词组成的CCS属性名 驼峰
(例如
maxHeight,
fontSize,
backgroundColor等),标准的方式希望与字词的属性与破折号分开(例如
max-height,
font-size,
background-color,等等)。
同样,IE
element.currentStyle将以指定的单位返回所有尺寸(例如12pt,50%,5em),标准方式将始终以像素为单位计算实际尺寸。
我前段时间做了一个跨浏览器功能,该功能允许您以跨浏览器的方式获取计算的样式:
function getStyle(el, styleProp) { var value, defaultView = (el.ownerdocument || document).defaultView; // W3C standard way: if (defaultView && defaultView.getComputedStyle) { // sanitize property name to css notation // (hypen separated words eg. font-Size) styleProp = styleProp.replace(/([A-Z])/g, "-$1").toLowerCase(); return defaultView.getComputedStyle(el, null).getPropertyValue(styleProp); } else if (el.currentStyle) { // IE // sanitize property name to camelCase styleProp = styleProp.replace(/-(w)/g, function(str, letter) { return letter.toUpperCase(); }); value = el.currentStyle[styleProp]; // convert other units to pixels on IE if (/^d+(em|pt|%|ex)?$/i.test(value)) { return (function(value) { var oldLeft = el.style.left, oldRsLeft = el.runtimeStyle.left; el.runtimeStyle.left = el.currentStyle.left; el.style.left = value || 0; value = el.style.pixelLeft + "px"; el.style.left = oldLeft; el.runtimeStyle.left = oldRsLeft; return value; })(value); } return value; }}上面的函数在某些情况下并不完美,例如对于颜色,标准方法将以rgb(…)表示法返回颜色,在IE上,它们将按定义返回它们。
我目前正在撰写有关该主题的文章,您可以在此处跟随我对此功能所做的更改。



