• js学习笔记17----元素的各种位置,尺寸


    1. offsetLeft[Top]

      当前元素到定位父级(即offsetParent)的距离(偏移值 )。
      父级没有定位:
      offsetParent -> body
      offsetLeft[Top] -> html

      父级有定位:
      ie 7:
        如果自己没有定位,那么offsetLeft[Top]是到body的距离。
        如果自己有定位,那么就是到定位父级的距离。
      其他:
        到定位父级的距离。

    2.元素宽高

      元素.style.width : 样式宽,带单位;

      元素.clientWidth : 可视区宽(样式宽 + padding),不带单位;

      元素.offsetWidth : 占位宽(可视区宽 + border),不带单位;

      高与宽类似,将width 替换为 height即可。

    3.获取元素位置的函数
    <!DOCTYPE html>
    <html>
    <head>
        <title>获取元素的位置</title>
        <meta charset="utf-8">
        <style type="text/css">
            div{padding:30px 40px;}
            #div1{border:2px dashed red;}      
            #div2{border:2px dashed green;}
            #div3{border:2px dashed blue;}
        </style>
    </head>
    <body>
        <div id="div1">
            <div id="div2">
                <div id="div3">
                    
                </div>            
            </div>
        </div>
        <script type="text/javascript">
            var oDiv3 = document.getElementById('div3');
            var p = getPos(oDiv3);
            function getPos(obj){            
                var pos={"left":0,"top":0};
                while(obj){
                    pos.left += obj.offsetLeft;
                    pos.top += obj.offsetTop;
                    obj = obj.offsetParent;
                }
                return pos;            
            }
            alert(p.left); //弹出92
            alert(p.top); //弹出72
        </script>
    </body>
    </html>
  • 相关阅读:
    Java 堆和栈 垃圾回收 2015/9/16
    多态 Java 2015/9/16
    学校项目过程中知识点 Java 2015/9/15 晚
    Python print输出不换行
    Windows 加载EXT分区
    RouterOS 安全模式
    RouterOS Openswan l2tp ipsec
    RouterOS 自动邮件备份脚本
    python chnroutes ROS版
    Kinect 2.0&Speech 11 中文语音控制
  • 原文地址:https://www.cnblogs.com/sese/p/6402301.html
Copyright © 2020-2023  润新知