jQuery----获取元素

最新推荐文章于 2023-01-04 22:02:03 发布

别喝我的旺仔牛奶

最新推荐文章于 2023-01-04 22:02:03 发布

阅读量183

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/m0_63502124/article/details/127864956

版权

本文介绍了如何使用JavaScript在前端开发中获取元素的尺寸，包括内容区域、内边距和外边距，并展示了计算元素偏移量的方法。通过实例演示了`width`, `height`, `innerWidth`, `innerHeight`, `outerWidth`, `outerHeight`和`offset()`方法的应用。

摘要由CSDN通过智能技术生成

获取元素的尺寸

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取元素的尺寸</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			div {
				width: 300px;
				height: 300px;
				padding: 20px;
				border: 20px solid #333;
				margin: 20px;
				background-color: aqua;
				background-clip: content-box;
			}
		</style>
	</head>
	<body>
		<div></div>

		<script src="../jquery.js"></script>
		<script>
			console.log('--------------获取元素尺寸--------------');
			// 第一套   width和height  获取的是元素内容区域的尺寸
			console.log($('div').width())
			console.log($('div').height())
			// 第二套   innerWidth和innerheight   获取的是padding
			console.log($('div').innerWidth());
			console.log($('div').innerHeight());
			// 第三套  outerWidth 和  outerHeight   获取的是整个元素的尺寸
			console.log($('div').outerWidth());
			console.log($('div').outerHeight());
		</script>
	</body>
</html>

获取元素的偏移量

// 获取元素相对于页面左上角的位置

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取元素的偏移量</title>
		<style>
			*{
				margin: 0;
				padding: 0;
				
			}
			div{
				background-color: red;
				width: 500px;
				height: 500px;
				margin: 30px;
				overflow: hidden;
			}
			p{
				width: 300px;
				height: 300px;
				background-color: orange;
				margin: 30px;
				overflow: hidden;
			}
			span{
				display: block;
				width: 100px;
				height: 100px;
				background-color: aqua;
				margin: 30px;
			}
		</style>
	</head>
	<body>
		<div>
			<p>
				<span></span>
			</p>
		</div>
	</body>
	
	<script src="../jquery.js"></script>
	<script>
		console.log('------获取元素偏移量-------');
		//  1. offset（）
		// 获取元素相对于页面左上角的位置
		console.log('div：',$('div').offset());
		console.log('p:',$('p').offset());
		console.log('span:',$('span').offset())
	</script>
</html>