jQuery获取元素尺寸

最新推荐文章于 2023-06-27 10:52:22 发布

小刘先生很努力

最新推荐文章于 2023-06-27 10:52:22 发布

阅读量217

点赞数 1

本文链接：https://blog.csdn.net/lzfengquan/article/details/104917208

版权

1 先设置一些简单的样式

	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		div{
			width:200px;
			height:200px;
			background-color: #00FF00;
			padding:20px;
			margin:10px;
			border:5px solid black;
			
		}
	</style>
	
	**2 在body里写内容**
	
<body>
	<div>
		<p>ceshi</p>
	</div>
</body>

**3 引入jQ** 

<script type="text/javascript" src='./jquery.min.js'></script>
<script type="text/javascript">
	//width,height
	// padding
	// border
	// margin
	4 
	// 三套方法，四种使用方式
	**// 1 width() 和 height()--获取元素的 内容 区域的尺寸**
	console.log($('div').width())//200
	console.log($('div').height())
	
	**// 2 innerWidth() 和 innerHeight()--获取元素的 内容+padding区域的尺寸**
	console.log($('div').innerWidth())//240
	console.log($('div').innerHeight())
	
	**// 3 outerWidth() 和 outerHeight()--获取元素的 内容 +padding+border 区域的尺寸**
	console.log($('div').outerWidth())//250
	console.log($('div').outerHeight())
	
	**// 4 outerWidth(true) 和 outerHeight(true)--获取元素的 内容 +padding+ border+margin区域的尺寸。**
	console.log($('div').outerWidth(true))//270
	console.log($('div').outerHeight(true))
</script>