前端web頁面中，js可以很方便的獲取div元素的高度和寬度，那麼這篇文章就說一說原生JS與JQ如何快速的獲取DIV元素的高度和寬度的方法。
js獲取div元素高度與寬度的方法
js獲取div元素的高度與寬度要用的 clientHeight 與 clientWidth方法
clientHeight：返回元素的可視高度
clientWidth：返回元素的可視寬度
示例代碼：
<div id="mochu" style="height: 200px;width:150px;color:#fff;background-color: blueviolet;">
飛鳥慕魚博客
</div>
<script>
//獲取高度
var h = document.getElementById('mochu').clientHeight;
//獲取寬度
var w = document.getElementById('mochu').clientWidth;
console.log(h);
console.log(w);
</script>
列印結果：
200
150
jquery獲取div元素高度與寬度的方法
相對於原生的 javascript 來說，使用 jquery 來獲取 div 元素的高度與寬度要簡單的多。
jq獲取div元素寬度的方法
$(selector).width()
jq獲取div元素高度的方法
$(selector).height()
示例代碼：
<div id="mochu" style="height: 100px;width:150px;">
http://www.feiniaomy.com
</div>
<script>
//獲取高度
var h = $('#mochu').height();
//獲取寬度
var w = $('#mochu').width();
console.log(h);
console.log(w);
</script>
列印結果：
100
150
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/273270.html
微信掃一掃 
支付寶掃一掃 