前端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>打印結(jié)果：
200
150
jquery獲取div元素高度與寬度的方法相對于原生的 javascript 來說，使用 jquery 來獲取 div 元素的高度與寬度要簡單的多 。
jq獲取div元素寬度的方法
$(selector).width()
jq獲取div元素高度的方法
【js獲取自動寬度元素的寬度 js獲取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>打印結(jié)果：
100
150
以上關(guān)于本文的內(nèi)容，僅作參考！溫馨提示：如遇健康、疾病相關(guān)的問題，請您及時就醫(yī)或請專業(yè)人士給予相關(guān)指導(dǎo)!
「愛刨根生活網(wǎng)」www.malaban59.cn小編還為您精選了以下內(nèi)容，希望對您有所幫助：- Excel自動填充學(xué)號的便捷方法
- Scrivener設(shè)置自動備份為ZIP文件
- WPS表格自動添加邊框設(shè)置教程
- Excel表格自動換行設(shè)置技巧
- 如何在360安全衛(wèi)士中開啟主界面自動縮放功能
- 泰拉瑞亞妖刀村正獲取方法詳解
- 提升虎牙直播使用體驗：設(shè)置開機時自動啟動
- Excel 2013的自動填充和快速填充功能提升辦公效率
- Excel數(shù)據(jù)等于指定值時，自動改變單元格顏色
- 如何讓電腦自動攔截廣告彈窗