jQuery的offset和position方法

旧城等待， 2022-12-02 04:25 92阅读 0赞

获取/设置标签的的位置数据  
offset()用于读取和设置offset值，相对于页面左上角的坐标（有left和top值）  
position()：相对于父元素左上角的位置（有left和top值）  
代码示例如下

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>jquery的offset和position方法</title>
    		<style type="text/css">
    			*{
    				margin:0;
    				padding: 0;
    			}
    			#box1{
    				width: 300px;
    				top: 30px;
    				height: 300px;
    				background-color: #ADFF2F;
    				position: absolute;
    			}
    			#box2{
    				width: 200px;
    				height: 200px;
    				top: 50px;
    				background-color: azure;
    				position: absolute;
    			}
    		</style>
    		<script type="text/javascript" src="../js/jquery-3.1.1/jquery-3.1.1.min.js" ></script>
    		<script type="text/javascript">
    			$(function(){
    				$("#btn4").click(function(){
    					var $box1 = $("#box1").offset();
    //					alert($box1);
    				console.log($box1.left,$box1.top);
    				var $box2 = $("#box2").offset();
    				console.log($box2.left,$box2.top);
    				var $b1 = $("#box1").position();
    				console.log($b1.left,$b1.top);
    				var $b2 = $("#box2").position();
    				console.log($b2.left,$b2.top);
    				});
    				$("#btn5").click(function(){
    					$("#box1").offset({
    						left:10,
    						top:50
    					});
    				});
    			});
    		</script>
    	</head>
    	<body>
    		<div id="box1">
    			<div id="box2"></div>
    		</div>
    		<button id="btn4">读取position和offset值</button>
    		<button id="btn5">设置offset值</button>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，92人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery UI 实例 - 定位（Position）

相对窗口、文档、锚、光标/鼠标等元素定位一个元素。如需了解更多有关 `.position()` 方法的细节，请查看 API 文档 [.position()][.positi

谁践踏了优雅/ 2024年03月23日 07:20/ 0 赞/ 10 阅读

相关 Jquery .position和offset区别

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hseDIw

迈不过友情╰/ 2023年10月18日 13:21/ 0 赞/ 20 阅读

相关 jquery offset positon 获取位置不准的解决方法

本地开发时，由于使用了图片，而且使用了offset().top涉及到图片所在的div距离计算的部分，本地开发一切都没问题；但是部署到服务器上时却出现布局错乱，经过排查发现总是少

忘是亡心i/ 2022年12月20日 06:04/ 0 赞/ 104 阅读

相关 jQuery的offset和position方法

获取/设置标签的的位置数据 offset()用于读取和设置offset值，相对于页面左上角的坐标（有left和top值） position()：相对于父元素左上角的位置

旧城等待，/ 2022年12月02日 04:25/ 0 赞/ 93 阅读

相关各种位置和高度计算:.position()、.offset()、.outerHeight()、.scrollTop、.scrollHeight、.clientHeight

1、.position()和.offset() jquery的.position()获取相对于最近的position为relative或absolute的父元素的偏移，返回.

客官°小女子只卖身不卖艺/ 2022年09月25日 05:17/ 0 赞/ 127 阅读

相关 jquery offset

code one: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

今天药忘吃喽~/ 2022年09月24日 08:24/ 0 赞/ 117 阅读

相关 jQuery offset 定位原理

jQuery.noConflict(); jQuery(document).ready(showNavigationHr); jQuery(window).resize(sho

ゝ一世哀愁。/ 2022年07月12日 14:17/ 0 赞/ 99 阅读

相关 jQuery 获取元素位置 offset() 和 position()

本篇文件向大家介绍的方法是 offset() 和 position() ，这两个方法有什么关系？下面的内容做详细介绍。 offset()功能描述：在匹配的元素集合中，获取的第

青旅半醒/ 2022年05月14日 13:35/ 0 赞/ 412 阅读

相关 jquery的position和offset方法

这里举个例子，jquery怎么计算的可以跟下源码（后续有空可能会专门介绍下）。我从页面以及css入手，自己计算结果，只是借用下jquery的position和offset方法来

青旅半醒/ 2021年10月01日 05:38/ 0 赞/ 291 阅读

相关 offSet().left 与position().left的区别

offSet().left是针对整个当前文档的所说的偏移； position().left是对于父元素来说的；转载于:https://www.cnblogs.com

阳光穿透心脏的1/2处/ 2021年09月29日 19:42/ 0 赞/ 397 阅读