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);
    }

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

JS 中的 offset、scroll、client

猜你喜欢