• 2 获取元素在页面中的位置


    获取元素在页面中的位置
    绝对位置:到body的距离
    相对位置:到视口的距离


    本身定位为fixed
    ==> offsetParent:null(不是火狐)
    offsetTop和offsetLeft也是参照于body的
    ==> offsetParent:body(火狐)
    本身定位不为fixed
    父级没有定位
    ==> offsetParent:body
    父级有定位
    ==> offsetParent:定位父级

    function getPointAb(node){
                    //while循环叠加offsetParent的offsetTop和offsetLeft
                    var x =0;
                    var y = 0;
                    while(node){
                        x+=node.offsetLeft;
                        y+=node.offsetTop;
                        
                        node = node.offsetParent;
                    }
                    
                    return {x:x,y:y};
                }
    封装函数
    <!DOCTYPE html>
    <html id="html">
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{
                    margin: 0;
                    padding: 0;
                }
                html,body{
                    height: 100%;
                    overflow: hidden;
                }
                #wrap{position: absolute;background: pink;left: 200px;top: 200px;}
                #inner1{position: absolute;background: deeppink;left: 150px;top: 150px;}
                div{
                     200px;
                    height: 200px;
                }
            </style>
        </head>
        <body id="body" >
            <div id="wrap">wrap
                <div id="inner1">
                    inner1
                </div>
            </div>
        </body>
        <script type="text/javascript">
            /*
             获取元素在页面中的位置
                绝对位置:到body的距离
                相对位置:到视口的距离
                
                
                本身定位为fixed
                        ==> offsetParent:null(不是火狐)
                                offsetTop和offsetLeft也是参照于body的
                        ==> offsetParent:body(火狐)
                本身定位不为fixed
                        父级没有定位
                            ==> offsetParent:body
                        父级有定位
                            ==> offsetParent:定位父级
                
                
            */
            window.onload=function(){
                var inner1 = document.querySelector("#inner1");
                var point = getPointAb(inner1);
                console.log(point);
                
                
                //boder margin会影响这个函数的取值
                function getPointAb(node){
                    //while循环叠加offsetParent的offsetTop和offsetLeft
                    var x =0;
                    var y = 0;
                    while(node){
                        x+=node.offsetLeft;
                        y+=node.offsetTop;
                        
                        node = node.offsetParent;
                    }
                    
                    return {x:x,y:y};
                }
            }
        </script>
    </html>
    View Code




    */

  • 相关阅读:
    要打印
    1月21日
    弹出层layer的使用
    Python学习笔记文件操作list列表操作
    Python学习笔记控制流之布尔值
    Python学习笔记控制流之操作运算符
    Python学习笔记字符串
    Python学习笔记list_to_str列表转字符串
    DropDownList 下拉无限极分类代码
    Jquery 基础教程测试
  • 原文地址:https://www.cnblogs.com/hack-ing/p/11865905.html
Copyright © 2020-2023  润新知