欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

jquery获取div的高度和宽度(获取div实际宽高度的方法)

程序员文章站 2023-11-27 19:05:58
前端web页面中,js可以很方便的获取div元素的高度和宽度,那么这篇文章就说一说原生js与jq如何快速的获取div元素的高度和宽度的方法。js获取div元素高度与宽度的方法js获取div元素的高度与...

前端web页面中,js可以很方便的获取div元素的高度和宽度,那么这篇文章就说一说原生js与jq如何快速的获取div元素的高度和宽度的方法。

jquery获取div的高度和宽度(获取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