使用js获取div的宽度和高度

admin 0

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

使用js获取div的宽度和高度-第1张图片-新锐站长网

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>

打印结果:

200150

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>

打印结果:

100150

标签: 高度 宽度 获取

发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~