JavaScript的.<li>元素相对于浏览器边界的绝对位置?

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".

Hri*_*sto 5

借鉴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中运行良好,但我还没有彻底测试过.此外,这篇文章可能与您的需求相关......

我希望这有帮助.