学习jQuery尺寸相关、滚动事件

最新推荐文章于 2023-06-09 14:02:42 发布

夏至青柠

最新推荐文章于 2023-06-09 14:02:42 发布

阅读量98

点赞数 1

分类专栏： jQuery 文章标签： jquery

本文链接：https://blog.csdn.net/qibulemingzi/article/details/107536406

版权

jQuery 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

jQuery尺寸相关、滚动事件

在这里插入图片描述
1.获取元素尺寸

width()、height()		获取元素width和height
innerWidth()、innerHeight()		包括padding的width和height
outerWidth()、outerHeight()		包括padding和border的width和height
outerWidth(true)、outerHeight(true)		包括padding和border以及margin的width和height

2.获取元素相对页面的绝对位置

offset()
var X = $('#DivID').offset().top;
var Y = $('#DivID').offset().left;
获取相对（父元素）位置
var X = $('#DivID').position().top;
var Y = $('#DivID').position().left;

练习一刻

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				console.log($('.div1').width());//200 width
				console.log($('.div1').innerWidth());//240 width+padding
				console.log($('.div1').outerWidth());//244 width+padding+border
				console.log($('.div1').outerWidth(true));//284 width+padding+border+margin
				console.log($('.div1').offset().top);//20 padding
				console.log($('.div2').position().top);//42 padding+border+margin
			})
		</script>
	</head>
	<body>
		<div class="div1" style="width: 200px;height: 200px;background-color: #0000CC;padding: 20px;border: 2px solid red;margin: 20px;">
			<div class="div2" style="width: 50px;height: 50px;background: #006400;"></div>
		</div>
	</body>
</html>