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>
  • 相关阅读:
    ASP.NET中备份恢复数据库
    SQL Server连接失败错误小结
    GSL科学计算库的使用
    [转]VC编程中经常能遇到LNK2005错误
    主函数main中变量(int argc,char *argv[])的含义
    毕业了,工作了
    何为COM组件技术
    一个老外总结的WP开发资源
    跟我一起写Makefile
    qsort() 之 __cdecl
  • 原文地址:https://www.cnblogs.com/sese/p/6402301.html
Copyright © 2011-2022 走看看