国产视频app 前端web頁面中,js可以很方便的獲取div元素的高度和寬度,那么這篇文章就說一說原生JS與JQ如何快速的獲取DIV元素的高度和寬度的方法。

js獲取div元素高度和寬度的方法

js獲取div元素高度與寬度的方法

js獲取div元素的高度與寬度要用的 clientHeight 與 clientWidth方法

clientHeight:返回元素的可視高度

国产视频app 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://xswdd.cn
</div>
<script>
    //獲取高度
    var h = $('#mochu').height();
    //獲取寬度
    var w = $('#mochu').width();
    console.log(h);
    console.log(w);
</script>

打印結果:

100
150