Ole*_*sak 1 html javascript css
如何知道<li>元素相对于浏览器边界的绝对位置?
<html>
<body style="overflow: hidden">
<div ID="Ticker" style="position:absolute; white-space: nowrap;">
<ol style="list-style-type:decimal; ">
<li style="float: left; width: 100px; padding: 2px 0px;">Test</li>
<li style="float: left; width: 100px; padding: 2px 0px;">Test</li>
<li ID="TargetElem" style="float: left; width: 100px; padding: 2px 0px;">Test</li>
<li style="float: left; width: 100px; padding: 2px 0px;">Test</li>
<li style="float: left; width: 100px; padding: 2px 0px;">Test</li>
<li style="float: left; width: 100px; padding: 2px 0px;">Test</li>
<li style="float: left; width: 100px; padding: 2px 0px;">Test</li>
</ol>
</div>
<script type="text/javascript" src="ticker.js" language="javascript"></script>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)
我需要一种方法来知道元素左侧值<li>与ID="TargetElem".
借鉴http://www.quirksmode.org/js/findpos.html ...
// findPosition() by quirksmode.org
// Finds the **absolute** position of an element on a page
function findPosition(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
do {
/*
* The loop continues until the object currently being investigated
* does not have an offsetParent any more. While the offsetParent is
* still there, it still adds the offsetLeft of the object to curleft,
* and the offsetTop to curtop.
*/
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return [curleft,curtop];
}
Run Code Online (Sandbox Code Playgroud)
这个功能应该在IE6,IE7,IE8,Safari,Firefox和Chrome中运行良好,但我还没有彻底测试过.此外,这篇文章可能与您的需求相关......
我希望这有帮助.