js 获取元素位置 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>

    <script language="javascript" type="text/javascript">


        function Button1_onclick() {
            var aa = $("#div2");
            var width = aa.width();
            var innerWidth = aa.innerWidth();
            var outerWidth = aa.outerWidth();
            var outerWidthtrue = aa.outerWidth(true);

            var positionleft = aa.position().left;
            var positiontop = aa.position().top;

            var offsetleft = aa.offset().left;
            var offsettop = aa.offset().top;

            var clientHeight = aa[0].clientHeight
            var clientLeft = aa[0].clientLeft
            var clientTop = aa[0].clientTop
            var clientWidth = aa[0].clientWidth

            var offsetHeight = aa[0].offsetHeight
            var offsetLeft = aa[0].offsetLeft
            var offsetTop = aa[0].offsetTop
            var offsetWidth = aa[0].offsetWidth

            var aaa = $("#div3");


            var apositionleft = aaa.position().left;
            var apositiontop = aaa.position().top;

            var aaaa = $("#div4");

            var clientLeft4 = aaaa[0].offsetLeft
            var apositionleft4 = aaaa.position().left;
            var apositiontop4 = aaaa.position().top;
            var offsetLeft = aaaa.offset().left;
            

        }


    </script>

    <style type="text/css">
        #Button1
        {
            width: 40px;
        }
    </style>
</head>
<body style="margin: 0px;">
    <form id="form1" runat="server">
    <div id="div1" style="border: 60px solid #FF6699; padding: 50px; height: 370px; background-color: #00FF00;">
        
        <div id="div2" style="padding: 20px; border: 30px solid #FF00FF; margin: 40px;  width: 100px; height:100px; background-color: #00CC99;">
            
            <input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
            <div id="div3" 
                
                
                style=" position:absolute; top: 300px; left: 300px; width: 200px; height: 200px; background-color: #006600; padding-top: 20px; padding-left: 20px;">
                
                <div id="div4" style="background-color: #3333CC; width: 81px;" ></div>
            </div>
            
            </div>
    </div>
    </form>
</body>
</html>

还有这

还有这里一句话http://www.jz123.cn/text/2134435.html

通过例子1页面测试的结果可以得出这个结论：

1，使用position()方法时事实上是把该元素当绝对定位来处理，获取的是该元素相当于最近的一个拥有绝对或者相对定位的父元素的偏移位置。

2，使用position()方法时如果其所有的父元素都为默认定位（static）方式，则其处理方式和offset()一样，是当前窗口的相对偏移。

3，使用offset()方法不管该元素如何定位，也不管其父元素如何定位，都是获取的该元素相对于当前视口的偏移。

另外,元素的offsetLeft属性是距离它最近的具有"position:absolute或position:relative" style的元素的编移位置.

如果有滚动条,则$(xx).innerWidth()会包括滚动条,而xx.scrollWidth,xx.clientWidth则不包括

posted @ 2013-06-01 12:22  wahgon  阅读(871)  评论(0)  编辑  收藏  举报