如何在javascript中获取HTML元素的样式值?

我正在寻找一种方法来从样式标签中设置了样式的元素中检索样式。

<style> #box {width: 100px;} </style> 

在身体

 <div id="box"></div> 

我正在寻找直接的JavaScript而不使用库。

我尝试了以下,但不断收到空白:

 alert (document.getElementById("box").style.width); alert (document.getElementById("box").style.getPropertyValue("width")); 

我注意到,我只能使用上面,如果我已经使用JavaScript设置样式,但无法与样式标签。

element.style属性让你只知道被定义为内联的CSS属性(以编程方式,或在元素的style属性中定义),你应该得到计算的样式

以跨浏览器的方式做起来并不那么容易,IE通过element.currentStyle属性和DOM Level 2 标准方式有其自己的方式,其他浏览器通过document.defaultView.getComputedStyle方法实现。

这两种方式有区别,例如,IE element.currentStyle属性期望您访问在camelCase (例如maxHeightfontSizebackgroundColor等)中由两个或更多单词组成的CCS属性名称,标准方式期望具有用破折号分隔的单词(如max-heightfont-sizebackground-color等)。

另外,IE的element.currentStyle会返回指定单元的所有大小(例如12pt,50%,5em),标准的方式会一直计算像素的实际大小。

我在前一段时间提出了一个跨浏览器的function,可以让你以跨浏览器的方式获得计算的样式:

 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(/([AZ])/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上它们将按照定义返回它们。

我目前正在撰写一篇关于这个主题的文章,你可以按照我对这个function所作的修改 。

在jQuery中 ,你可以做alert($("#theid").css("width"))

– 如果你没有看jQuery,我强烈推荐它; 它使许多简单的JavaScript任务毫不费力。

更新

备案,这个职位是5岁。 networking已经开发,移动等等。有一些方法可以用Plain Old Javascript来做到这一点,这是更好的方法。

我相信你现在可以使用Window.getComputedStyle()

文档MDN

 var style = window.getComputedStyle(element[, pseudoElt]);