javascript获取对象高度和宽度(整理)

标签元素的宽高值获取
Obj.offsetWidth    //绝对宽度 
Obj.offsetHeight  //绝对高度

Obj.offsetLeft  //相对于自己的offsetParent元素的位置

Obj.clientLeft   //和客户区域的实际左边之间的距离

 

Obj.scrollLeft  //返回和设置当前横向滚动务的坐标值

下面是我做的例子

 

<!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>
    <title>无标题页</title>
    <style type="text/css">
        #tanchu_div
        {
            position: relative;
        }
        #ttt
        {
            position: absolute;
            display: none;
            top: 0;
            background-color: ActiveBorder;
        }
    </style>

    <script type="text/javascript">
   
    function t(){
   
      
     var my_Width = document.getElementById("aaa").offsetWidth  ;
     var b =  document.getElementById("aaa").offsetLeft;
        my_Width = my_Width + b; 
           document.getElementById("ttt").style.left = my_Width+10 + 'px';
           document.getElementById("ttt").style.position = 'absolute';//"asd"就是要绝对定位的div的id。
           document.getElementById("ttt").style.zIndex = '999';
           document.getElementById("ttt").style.display="block";
  
    }
   
    </script>

</head>
<body>
    11000120121212
    <br />
    11000120121212 11000120121212 11000120121212 11000120121212 11000120121212 11000120121212
    11000120121212 11000120121212
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <div id="tanchu_div" style="left: 100px">
        11000120121212110001201212121100012012121211000120121212<a id="aaa" onclick="t();"
            href="#">弹出 </a>
        <div id="ttt">
            dsdjvdjdv哈哈snjd vsjdsvj2335121211
            <br />
            dsdjvdjdvsnj
            <br />
            dvsjdsvj2335121211
            <br />
            dsdjvdjdvsnjd
            <br />
            vsjdsvj2335121211
            <br />
            dsdjvdjdvsnjd
            <br />
            vsjdsvj2335121211
            <br />
            dsdjvdjdvsnjdvsjdsvj2335121211
            <br />
            dsdjvddvsnjd
            <br />
            vsjdsvj2335121211
            <br />
            dsdjvdjdvsnjd
            <br />
            vsjdsvj2335121211
            <br />
            dsdjvdjdvsnj
            <br />
            dvsjdsvj2335121211
            <br />
            dsdjvdjdvsnjd
            <br />
            vsjdsvj2335121211
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
        </div>
    </div>
    sdsfsefsfsdfs fdsfsdfsdfsdfsd fsdfdsfsdfsdfsfdss
    <br />
    sdsfsefsfsdfs fdsfsdfsdfsdfsd fsdfdsfsdfsdfsfdss sdsfsefsfsdfs fdsfsdfsdfsdfsd fsdfdsfsdfsdfsfdss
    sdsfsefsfsdfs fdsfsdfsdfsdfsd fsdfdsfsdfsdfsfdss sdsfsefsfsdfs fdsfsdfsdfsdfsd fsdfdsfsdfsdfsfdss
    sdsfsefsfsdfs fdsfsdfsdfsdfsd fsdfdsfsdfsdfsfdss sdsfsefsfsdfs fdsfsdfsdfsdfsd fsdfdsfsdfsdfsfdss
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
</body>
</html>

posted @ 2012-03-08 10:14  郑文亮  阅读(397)  评论(0编辑  收藏  举报