Question

我想读取元素的高度和宽度。

<style type="text/css">
    .big {
        height: 100px;
        width: 100px
    }
</style>

<div id="box1" style="width:50px; height=50px;"></div>
<div id="box2" class="big"></div>

对于box01我可以使用height=getElementById("box01").style.height - 没关系。

但是对于box02它不起作用。它什么都不返回。

Answer 1

getComputedStyle（适用于现代浏览器）
currentStyle（适用于旧的IE版本）

Answer 2

您可以使用window.getComputedStyle()获取任何html元素的实际尺寸，如下所示：

var elem1 = document.getElementById("box01");  
var height = window.getComputedStyle(elem1, null).getPropertyValue("height");

请参阅getComputedStyle @ MDN。

Answer 3

如果您使用的是mootools，则必须使用

 $('box2').getHeight().toInt();

只是为了得到int值（没有'px'）

否则在jquery中

 $('.box2').height();

会做的伎俩

如果你想使用默认的javascript

 var elem1 = document.getElementById("box2");  
 var style = window.getComputedStyle(elem1, null);

Answer 4

我建议你研究一下Jquery。这是一段非常有用的代码。

How to set CSS settings in Jquery

$('#box1').css('height', 50);

获取css属性：

var box1Height = $('#box1').css('height');

＃box1让jquery知道你想用ID box1对HTML对象进行操作。这就是＃符号的用途。有关jquery selectors

中的更多信息

Answer 5

您可以使用window.getComputedStyle或element.currentStyle（取决于哪个浏览器）。较早版本的IE需要currentStyle。

这是一个快速的可互操作的垫片，它将使您可以在所有浏览器中使用的全局函数，而不包括像jQuery这样的整个库：

//must be executed on or after the domready event, since it (may) require document.body to be non-null
var getComputedStyle = function() {
  var func = null;
  if (document.defaultView && document.defaultView.getComputedStyle) {
    func = document.defaultView.getComputedStyle;
  } else if (typeof(document.body.currentStyle) !== "undefined") {
    func = function(element, anything) {
      return element["currentStyle"];
    };
  }

  return function(element, style) {
    return func(element, null)[style];
  }
}();

//and use like so:
getComputedStyle(document.getElementById("foo"), "display"); //might return "inline-block"

从本文复制的代码：http://tmont.com/blargh/2010/4/get-computed-style-in-javascript。还有许多其他类似的方法可以通过Google搜索找到。

Answer 6

如果你想要一个元素的高度，那么读取clentHeight或offsetHeight属性可能比css更重要。

如何在CSS类中设置元素的属性

6 个答案: