jQuery：jQuery尺寸和位置操作

最新推荐文章于 2022-11-10 20:29:49 发布

奄奄一息的一条咸鱼

最新推荐文章于 2022-11-10 20:29:49 发布

阅读量339

点赞数

分类专栏： jQuery 文章标签： js javascript 定位

本文链接：https://blog.csdn.net/weixin_46682277/article/details/117557291

版权

jQuery 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

jQuery尺寸：

语法	用法
width() / height()	获得匹配元素的宽度和高度，只计算width / height
innerWidth() / innerHeight()	获得匹配元素的宽度和高度，包含padding值
outerWidth() / outerHeight()	获得匹配元素的宽度和高度，包含padding和border
outerWidth(true) / outerHeight(true)	获得匹配元素的宽度和高度，包含padding、border和margin

<style>
.box {
	width: 100px;
	height: 100px;
	background-color: chartreuse;
	padding: 20px;
	margin: 20px;
	border: cornflowerblue 10px solid;
}
</style>
<body>
<div class="box"></div>
<script>
$(function(){
	// 只单纯返回width和height 100
	console.log($(".box").width());
	// 包含padding值 140
	console.log($(".box").innerWidth());
	// 包含padding和border值 160
	console.log($(".box").outerWidth());
	// 包含padding、border和margin值 200
	console.log($(".box").outerWidth(true));
})
</script>
</body>

以上jQuery方法的参数如果为空，则是获取相对应的值，如果参数里写上了数值，则是修改对应的值。

jQuery位置：

位置主要有三个：offset()、position()、scrollTop()/scrollLeft()

1.offset() 设置或获取元素相对于文档的偏移坐标，和父级没有关系

该方法有两个属性left、top，offset().top获取文档距离文档顶部的距离，offset().left获取文档距离文档左侧的距离。

<script>
$(function(){
	// 获取对应元素的偏移
	console.log($(".son").offset().top);
	// 设置对应元素的偏移
	$(".son").offset({
		top:100,
		left:100
	})
})
</script>

2.position()用于返回元素相对于带有定位的父级偏移坐标，如果父级没有定位，则以文档为准。

position()方法只能获取偏移坐标，不能像offset()一样设置。

<script>
$(function(){
	console.log($(".son").position().left);
})
</script>

3.scrollTop()/scrollLeft() 设置或获取元素被卷去的头部和左侧

<script>
$(function(){
	// 当页面滚动时触发
	$(window).scroll(function(){
	// 如果文档被卷去的头部>=了150 让son元素显示，反之隐藏
	if($(document).scrollTop() >= 150){
		$(".son").show();
	}else {
		$(".son").hide();
	}
	});
})
</script>

奄奄一息的一条咸鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery：jQuery尺寸和位置操作

jQuery尺寸：语法用法width() / height()获得匹配元素的宽度和高度，只计算width / heightinnerWidth() / innerHeight()获得匹配元素的宽度和高度，包含padding值outerWidth() / outerHeight()获得匹配元素的宽度和高度，包含padding和borderouterWidth(true) / outerHeight(true)获得匹配元素的宽度和高度，包含padding、bord
复制链接

扫一扫

专栏目录