js如何獲取元素的高度和寬度

antzone發表於2017-03-14
JS

獲取元素的尺寸是常有的操作，當然也沒有難度，只要按照給定的方式操作就可以了，下面簡單介紹一下。

下面以獲取div的尺寸為例，程式碼如下:

[HTML] 純文字檢視 複製程式碼
<style type="text/css">
#thediv{
  width:150px;
  height:150px;
}
</style>
</head> 
<body>
<div id="thediv"></div>
</body> 
</html>

下面介紹一下如何獲取上面div的尺寸:

很多朋友可能首先想到使用以下方式獲取尺寸:

[JavaScript] 純文字檢視 複製程式碼
style.width
style.height

但是使用style方式只能夠獲取以style=""此種方式定義的尺寸。可以使用以下方式獲取尺寸:

[JavaScript] 純文字檢視 複製程式碼
div.offsetHeight
div.offsetWidth

需要特別說明的是，這兩個屬性是隻讀的。

相關文章