js获取元素高度的方法(js获取div的宽度和高度)

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

js获取元素高度的方法(js获取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.qin1qin.com/catagory/32258/)内容由互联网用户自发投稿贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 630367839@qq.com 举报,一经查实,本站将立刻删除。

(0)
上一篇 2022-11-21 10:55:33
下一篇 2022-11-21 10:56:16

软件定制开发公司

相关阅读

发表回复

登录后才能评论
通知:禁止投稿所有关于虚拟货币,币圈类相关文章,发现立即永久封锁账户ID!