jQuery和javascript的那些宽高

最新推荐文章于 2022-04-18 16:18:38 发布

原创最新推荐文章于 2022-04-18 16:18:38 发布 · 269 阅读

1 ·

CC 4.0 BY-SA版权

javascript 专栏收录该内容

19 篇文章

订阅专栏

本文详细解析了jQuery和原生JavaScript中各种获取元素宽高的方法及其应用场景，包括不同属性和方法的区别，如jQuery的height(), innerHeight(), outerHeight()与原生JS的clientHeight, offsetHeight等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery和javascript的那些宽高

1.jQuery获取容器的宽高

$(ele).height() -- 获取容器的内容高度

只包含内容高度，不包含padding和border;

注意：(1)、父元素添加box-sizing属性

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>	
		body, p{
			margin: 0;	
			padding: 0;
		}
		.body{
			padding: 100px;
			background: #f00;
			font-style: 40px;
			height: 100px;	
		}
		.wrap{
                        height: 300px
			padding: 20px;
                        box-sising: border-box;
		}
	</style>
</head>
<body>
		
	<div class="wrap">	
		<div class="body">	
			我是内容
		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
	<script>
		var getHeight = function(){
		      var wrapH = $('.wrap').height();
		      console.log('wrapH = '+wrapH); /*输出为260*/
		}
		getHeight();

	</script>	
</body>
</html>

由此Demo可知，虽然box-sising: border-box在css布局中起到height包含padding和border,但jquery获取则不如此；

(2)、通过$(ele).css('height')获取的高度带单位，而$.height()获取的高度不带单位。

$.innerHeight() -- 容器的宽高(包括padding)

包含容器的padding

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>	
		body, p{
			margin: 0;	
			padding: 0;
		}
		.body{
			padding: 100px;
			background: #f00;
			font-style: 40px;
			height: 100px;	
		}
		.wrap{
                        height: 300px
			padding: 20px;
                        box-sising: border-box;
		}
	</style>
</head>
<body>
		
	<div class="wrap">	
		<div class="body">	
			我是内容
		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
	<script>
		var getHeight = function(){
		      var wrapH = $('.wrap').innerHeight();
		      console.log('wrapH = '+wrapH); /*输出为300*/
		}
		getHeight();
	</script>	
</body>
</html>

$.outerHeight() -- 容器的宽高(包含padding和border)

注意：（1）. 通过传入参数 true,则获取的outerHeight包含margin

Demo:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style>	
		body, p{
			margin: 0;	
			padding: 0;
		}
		.body{
			padding: 100px;
			background: #00f;
			font-style: 40px;
			height: 100px;	
		}
		.wrapNoMar{
            height: 300px;
			margin: 0;
		}
		.wrapMar{
			height: 300px;
			margin: 20px;
		}
	</style>
</head>
<body>
		
	<div class="wrapNoMar">	
		<div class="body">	
			我是内容
		</div>
	</div>
	<div class="wrapMar">	
		<div class="body">	
			我是内容
		</div>
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
	<script>
		var getHeight = function(){
		      var wrapH = $('.wrap').outerHeight();
		      console.log('wrapH = '+wrapH); /*输出为300*/
		      var wrapH = $('.wrap').outerHeight(true);
		      console.log('wrapH = '+wrapH); /*输出为340*/
		      var wrapH = $('.wrap').outerHeight();
		      console.log('wrapH = '+wrapH); /*输出为300*/
		}
		getHeight();
	</script>	
</body>
</html>

window.height()、window.innerHeight()、window.outerHeight()不推荐设置宽高

2.原生Javascript的宽高(属性)

element.clientHeight -- 返回元素的可见高度

容器高度+padding(不包括滚动条的宽度)

element.offsetHeight -- 返回元素的高度

容器高度+padding+border(包括滚动条的宽度)

element.offsetTop -- 返回元素垂直方向的偏移量

(1)、父元素设置position: relative;属性

offsetTop的相对元素为设置相对定位的父元素

(2)、父元素不设置相对定位

offsetTop的相对元素为html，包含html的padding和border、body的padding和border

element.scrollHeight -- 返回元素内容的整体高度