$.offset 深入剖析

最新推荐文章于 2022-11-24 23:57:43 发布

352328759

最新推荐文章于 2022-11-24 23:57:43 发布

阅读量2.3k

点赞数 2

分类专栏： Jquery 介绍冷知识

本文链接：https://blog.csdn.net/u013970232/article/details/87297001

版权

介绍同时被 3 个专栏收录

36 篇文章 0 订阅

订阅专栏

冷知识

20 篇文章 0 订阅

订阅专栏

Jquery

11 篇文章 0 订阅

订阅专栏

offset() 方法返回或设置匹配元素相对于文档的偏移（位置）
$.offset.setOffset 不是常用方法,属于jq内部方法

$("#id1").offset()
//不传值
//返回对象 {"top":8,"left":8}

$.offset() 有值的时候, 内部会将匹配元素遍历, 并调用 $.offset.setOffset
$.offset.setOffset(当前对象, 传入值, 序号)

$("#id2").offset({
top: 0,
left: 0
})
//传入一个指定格式对象
//设置匹配元素相对于文档的偏移 (相对于html)
//没设置的话, 是用 position: relative; 定位的

$("#id3").offset(function(a, b) {
   return {
       top: b.top + 5,
       left: b.left + 5
   }
})
//传入一个方法, 方法参数 i, curOffset(序号, 位置数据), 并 return 一个指定格式对象
//return 值会与 curOffset 作比较, 所以不可以直接修改 curOffset 对象
//例子设置相对位移值

$("#id4").offset({
   top: 1,
   left: 1,
   using: function(prop) {
       console.log(prop)
   }
})
//对象设了 using 值, 就把相对位移的数据返回 [options.using.call( elem, props )]
//对象没设 using 值, 就用相对位移的数据设置 $.css() [curElem.css( props )]

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

	<head>
		<meta http-equiv="Cache-Control" CONTENT="no-cache" />
		<meta http-equiv="Pragma" CONTENT="no-cache" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>$.offset 深入剖析</title>
		<style type="text/css">
			.ff {
				border: 3px red solid;
				display: inline-block;
			}
			
			.ss {
				border: 3px green solid;
				display: inline-block;
			}
		</style>
	</head>

	<body>

		<div class="ff">
			<div id="id1" class="ss">id1</div>
		</div>
		<div class="ff">
			<div id="id2" class="ss">id2</div>
		</div>
		<div class="ff">
			<div id="id3" class="ss">id3</div>
		</div>
		<div class="ff">
			<div id="id4" class="ss">id4</div>
		</div>

	</body>

	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script type="text/javascript" th:inline="javascript">
		"use strict";

		//#id1
		console.log($("#id1").offset())

		//#id2
		$("#id2").offset({
			top: 0,
			left: 0
		});

		//#id3
		$("#id3").offset(function(a, b) {
			return {
				top: b.top + 5,
				left: b.left + 5
			}
		})

		//#id4
		$("#id4").offset({
			top: 1,
			left: 1,
			using: function(prop) {
				console.log(prop)
			}
		});
	</script>

</html>