Question

如何使用javascript打印html元素的style属性值。我可以使用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）。有关计算和级联样式的更多信息，请参阅here。

Answer 2

这应该转储对象：这是一个Example

编辑：有点奇怪：

for (var prop in styles) {
    console.log(styles[prop], styles[styles[prop]]);
}

Answer 3

<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 4

哦，srsly ......就像

一样简单

element.style.cssText

并且它是cross browser

http://jsfiddle.net/4F2RQ/

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

4 个答案: