jquery获取div的高度和宽度（获取div实际宽高度的方法）

前端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

点击展开全文

jquery获取div的高度和宽度（获取div实际宽高度的方法）

js获取div元素高度与宽度的方法

jquery获取div元素高度与宽度的方法

相关推荐

手机性能排行榜最新（5g手机排行榜2021前十名）

国民轻薄本 联想IdeaPad14s 2020到底哪里好？

高中学生党如何赚钱，适合高中生赚钱的平台

折叠床图片及报价大全（四大小型轻便携带折叠床品牌介绍）

草图大师入门零基础（免费设计室内装修app软件教程）

iphone9报价多少钱（速览iphone9最新报价）

发表评论

国民轻薄本联想IdeaPad14s 2020到底哪里好？