JS 中的 offset、scroll、client

---恢复内容开始---

offset的使用

css部分

*{
            margin:0;
            padding: 0
        }
        #offset{
            width: 100px;
            height:100px;
            padding:20px;
            background: red;
            margin-top:30px;
        }
        #fixed{
            position: absolute;
            right:100px;
            top:200px;
            width: 200px;
            height: 200px;
            background: black;
        }

html部分

<div id="fixed">
        <div id="center" style="height:140px;width: 140px">
            <div id="offset"></div>
        </div>
    </div>

javascript以及讲解

var offset = document.querySelector("#offset");//检测盒子自身宽高+padding+border 不包括margin offset：偏移、补偿、位移
    console.log(offset.offsetWidth);
    console.log(offset.offsetTop);// offsetLeft 和 offsetTop  （检测距离父盒子有定位的左/上面的距离） 和盒子本身有无定位无关。
    console.log(offset.offsetParent);//应该返回fixed
    //offsetParent 取最近的那个有定位的父级元素。 如果没有则返回body元素
    //两者的区别
    //（4） offsetLeft 和 style.left 区别
    /*① 最大区别在于offsetLeft 可以返回没有定位盒子的距离左侧的位置。 而 style.left不可以。
    ② offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px。
    ③ offsetTop 只读，而 style.top 可读写。（只读是获取值，可写是赋值）
    ④ 如果没有给 HTML 元素指定过 top 样式，则style.top 返回的是空字符串。
    （style.left在等号的左边和右边还不一样。左边的时候是属性，右边的时候是值。）*/

效果

div#fixed

div#center

div#offset

控制台效果

兼容性问题

var scroll = document.getElementById("scroll");
    setInterval(function(){
        // var aaa = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
var aaa = document.documentElement.scrollTop + document.body.scrollTop;
console.log(aaa);
        console.log(document.body.scrollTop);
    }, 3000);

① 未声明 DTD 时（谷歌只认识他）
document.body.scrollTop
② 已经声明DTD 时（IE678只认识他）
document.documentElement.scrollTop
③ 火狐/谷歌/ie9+以上支持的
window.pageYOffset

client使用

    //client 系列
    //获取网页
    var scroll = document.getElementById("scroll");
    console.log(scroll.clientWidth);//  clientWidth = width+左右padding 不包括边框和外边距
    //clientTop = boder.top(上边框的宽度)
    console.log(scroll.clientTop);//上边距的宽度

（2）clientX 和 clientY

clientX：鼠标距离可视区域左侧距离（event调用）

clientY：鼠标距离可视区域上侧距离（event调用）

event事件对象

普通浏览器支持 event（带参，任意参数）

ie 678 支持 window.event（无参，内置）

IE678中，window.event

在火狐谷歌中，event或者，在事件绑定的函数中，加参，这个参数就是event.

Box.onclick = function (aaa){   aaa就是event     }

重要内容

pageY/pageX: 鼠标位于整个网页页面的顶部和左侧部分的距离。（页面）

pcreenY/screenX: 鼠标位于屏幕的上方和左侧的距离。（屏幕）

clientX/clientY: 鼠标位于浏览器的左侧和顶部的距离。（浏览器大小和位置）

    document.body.onclick = function(event){
        var s = event;
        console.log("页面"+s.pageY);//获得距离页面上的距离
        console.log("屏幕"+s.screenY);//获得距离浏览器上面的距离
        console.log("屏幕"+s.clientY);
    }

读者可以将上面的代码赋值下来运行看一下 建议先将刘拉起窗口达到最大查看效果 再次将浏览器的窗口缩小 此时第二个的结果就发生变化 了 页面和相对于浏览器的不会发生变化

原文地址：https://www.cnblogs.com/webcyh/p/11620000.html