淘先锋技术网

首页 1 2 3 4 5 6 7

3.9、元素的位置，元素的宽高、可视区的宽高

一、获取元素大页面的距离

        div {
            padding: 40px 50px;
        }
        
        .div1 {
            background: red;
        }
        
        .div2 {
            background: brown;
            position: relative;
        }
        
        .div3 {
            background: rebeccapurple;
            position: relative;
        }
    </style>
</head>

<body>
    <div class="div1">
        <div class="div2">
            <div class="div3"></div>
        </div>
    </div>
    <script>
        // 元素.offsetParent 返回当前元素有定位属性的父级，如果没有定位的父级，则返回body
        // 元素.offsetLeft 返回当前元素到有定位属性父级的左边的距离，如果没有定位的父级则返回到body的距离
        // 元素.offsetTop 返回当前元素到有定位属性父级的上边的距离，如果么有定位父级则返回到body的距离
        var div1 = document.getElementsByTagName('div')[0]
        var div2 = document.getElementsByTagName('div')[1]
        var div3 = document.getElementsByTagName('div')[2]
            // console.log(div1)
            // console.log(div2)
        console.log(div3.offsetParent) //返回有定位的父级 div2
        console.log(div2.offsetParent) //返回body

        console.log(div3.offsetTop) //返回到div2的距离 div2
        console.log(div2.offsetTop) //返回到body的距离  body有默认的8像素的margin值

        //求一个元素到页面的距离（区分 到文档的距离）(遇到嵌套很深的，且有定位父级的元素到页面的距离)
        function getPOS(obj) {
            var left = 0;
            var top = 0;
            while (obj) {
                left += obj.offsetLeft; //获取元素到定位的父级
                top += obj.offsetTop; //获取元素到定位的父级
                obj = obj.offsetParent; //把obj换成带有定位的父级
            }
            return {
                left: left,
                top: top
            }

        }
        console.log(getPOS(div3)) //Object {left: 108, top: 88}

二、元素的 宽高

var div1 = document.getElementsByTagName('div')[0]
console.log(div1.style.width) //'' 只能获取行间的  有单位
console.log(div1.style.height) //'' 只能获取行间的  有单位
    //获取元素的宽、高
console.log(div1.clientHeight) //120  无单位 padding+height
console.log(div1.clientWidth) //120  无单位 padding+width     无margin

console.log(div1.offsetWidth) //124  无单位 padding+border+width   无margin
console.log(div1.offsetHeight) //124 无单位 padding+border+height  无margin
    //js不能获取隐藏的元素的宽高

三、可视区的宽高

// 可视区的宽高
                   html
var wd = document.documentElement.clientWidth;
                   html
var ht = document.documentElement.clientHeight;
console.log(wd) //可视区宽高   不带上面的操作栏
console.log(ht) //可视区宽高   不带上面的操作栏