zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    剑指63.数据流中的中位数
    剑指62.二叉搜索树的第k个结点
    JPA ---- EntityManager使用
    JPA ---- EntityManager介绍
    win10多桌面切换
    $emit子组件如何传递多个参数
    height高度自适应
    vue Avoided redundant navigation to current location
    Ant Design 使用小结
    Object.keys方法之详解
  • 原文地址:https://www.cnblogs.com/zhwl/p/2384705.html
Copyright © 2011-2022 走看看