zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    fiddler工具窗口功能介绍
    Fiddler导出jmx格式实现方法
    Fiddler抓包时一直请求:http://clients1.google.com:443
    内置函数的使用
    python中操作excel、ddt、config、logging方法
    Pycharm 将代码上传到GitHub
    unittest框架-优化一【变量参数化】
    excel的读取
    ddt数据驱动
    selenium中的js和jquery的相关用法
  • 原文地址:https://www.cnblogs.com/sese/p/6402301.html
Copyright © 2011-2022 走看看