Question

使用 javascript 打印 HTML 元素的内联样式值

2011-09-06

6592

javascript css

如何使用 javascript 打印 html 元素的样式属性值。我可以使用 document.getElementById('myId').style.property 获取特定样式属性值，其中 property 类似于 width 、 height 等。

但是，如何获取元素的完整样式列表？

Answer 1

document.getElementById('myId').style.cssText 作为字符串，或 document.getElementById('myId').style 作为对象。

编辑：

据我所知，这将返回“实际”的内联样式。在元素 <a id='myId' style='font-size:inherit;'> 上， document.getElementById('myId').style.cssText 应返回 "font-size:inherit;" 。如果这不是您想要的，请尝试 document.defaultView.getComputedStyle 或 document.getElementById('myId').currentStyle （第一个是除 IE 之外的所有浏览器，第二个是仅 IE）。有关计算样式与级联样式的更多信息，请参见此处。

Answer 2

<div id="x" style="font-size:15px">a</div>
<script type="text/javascript">
function getStyle(oElm, strCssRule){
    var strValue = "";
    if(document.defaultView && document.defaultView.getComputedStyle){
        strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
    }
    else if(oElm.currentStyle){
        strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
            return p1.toUpperCase();
        });
        strValue = oElm.currentStyle[strCssRule];
    }
    return strValue;
}

// get what style rule you want
alert(getStyle(document.getElementById('x'), 'font-size'));
</script>

Answer 3

哦，说真的... 它很简单，只需

element.style.cssText

并且它跨浏览器

http://jsfiddle.net/4F2RQ/