13-解决方案

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

Previous 上一篇本节目录 Next 下一篇

6.3.2　解决方案

jQuery提供三个确定元素位置的实用方法：

offset

返回一个对象，其中包含元素左上角与文档左上角的相对位置。

position

返回一个对象，其中包含元素左上角与该元素第一个定位的双亲元素（ offsetParen ）左上角的相对位置。

offsetParent

返回一个jQuery对象，其中包含元素的 offsetParent 。

offset 方法可用于确定元素在页面上的位置——例如，在你打算滚动窗口到某个元素所在位置的时候。 position 方法用于改变元素位置，或者寻找元素在滚动容器中的位置。上述两个任务在后续几节中将讨论；本节的目标是概述定位方法。

假定有如下HTML，其中的 <body> 元素外边距为0，内边距为10个像素：

<body id="the_offset_parent">
　　 <h1>Finding the Offset of an Element</h1>
　　 <div id="foo">
　　　　　<div id="bar">Some text inside #bar, which is inside #foo</div>
　　 </div>
　　 <div id="results"></div>
</body>

可以使用如下代码确定两个 DIV 的位置、偏移量和offsetParent元素：

jQuery(document).ready(function() {
　　 var $foo = jQuery('#foo');
　　 var $bar = jQuery('#bar');
　　 var $results = jQuery('#results');
　　 var fooPosition = $foo.position();
　　 var barPosition = $bar.position();
　　 var fooOffset = $foo.offset();
　　 var barOffset = $bar.offset();
　　 var $fooOffsetParent = $foo.offsetParent();
　　 var $barOffsetParent = $bar.offsetParent();
　　 $results
　　　　　.append('<p>#foo position.top: ' + fooPosition.top + '</p>') // 10
　　　　　.append('<p>#foo position.left: ' + fooPosition.left + '</p>') // 10
　　　　　.append('<p>#bar position.top: ' + barPosition.top + '</p>') // 10
　　　　　.append('<p>#bar position.left: ' + barPosition.left + '</p>') // 10
　　　　　.append('<p>#foo offset.top: ' + fooOffset.top + '</p>') // 10
　　　　　.append('<p>#foo offset.left: ' + fooOffset.left + '</p>') // 10
　　　　　.append('<p>#bar offset.top: ' + barOffset.top + '</p>') // 10
　　　　　.append('<p>#bar offset.left: ' + barOffset.left + '</p>') // 10
　　　　　.append('<p>ID of #foo offsetParent: '
　　　　　　　 + $fooOffsetParent.attr('id')) // the_offset_parent
　　　　　.append('<p>ID of #bar offsetParent: '
　　　　　　　 + $barOffsetParent.attr('id')); // the_offset_parent
});

在这个例子中，两个元素的位置相同，也有相同的 offsetParent （文档的 <body> 元素）。

但是如果用CSS定位 #foo ：

<body id="the_offset_parent">
　　 <div id="foo" style="position:absolute; top:10px; left:10px;">
　　　　　<div id="bar">Some text inside #bar, which is inside the
absolutely-positioned #foo</div>
　　 </div>
　　 <div id="results" style="position:absolute; top:60px; left:10px;"></div>
</body>

结果就改变了。 #foo DIV 实际上没有移动，它的 offsetParent 也没有变，所以它的位置和偏移量保持不变； #bar DIV 也没有移动，但是因为它的 offsetParent 变化，所以位置也随之变化——记住，元素的位置是相对于其 offsetParent 的。

jQuery(document).ready(function() {
　　 var $foo = jQuery('#foo');
　　 var $bar = jQuery('#bar');
　　 var $results = jQuery('#results');
　　 var fooPosition = $foo.position();
　　 var barPosition = $bar.position();
　　 var fooOffset = $foo.offset();
　　 var barOffset = $bar.offset();
　　 var $fooOffsetParent = $foo.offsetParent();
　　 var $barOffsetParent = $bar.offsetParent();
　　 $results
　　　　　.append('<p>#foo position.top: ' + fooPosition.top + '</p>') // 10
　　　　　.append('<p>#foo position.left: ' + fooPosition.left + '</p>') // 10
　　　　　.append('<p>#bar position.top: ' + barPosition.top + '</p>') // 0
　　　　　.append('<p>#bar position.left: ' + barPosition.left + '</p>') // 0
　　 .append('<p>#foo offset.top: ' + fooOffset.top + '</p>') // 10
　　 .append('<p>#foo offset.left: ' + fooOffset.left + '</p>') // 10
　　 .append('<p>#bar offset.top: ' + barOffset.top + '</p>') // 10
　　 .append('<p>#bar offset.left: ' + barOffset.left + '</p>') // 10
　　 .append('<p>ID of #foo offsetParent: '
　　　　　+ $fooOffsetParent.attr('id')) // the_offset_parent
　　 .append('<p>ID of #bar offsetParent: '
　　　　　+ $barOffsetParent.attr('id')); // foo
});

Previous 上一篇本节目录 Next 下一篇

13-解决方案

6.3.2 解决方案

6.3.2　解决方案