js三大系列

最新推荐文章于 2019-09-02 15:55:16 发布

依赖_赖

最新推荐文章于 2019-09-02 15:55:16 发布

阅读量236

点赞数

分类专栏： JavaScript+css+html 文章标签：三大系列 offset scroll client

本文链接：https://blog.csdn.net/weixin_39150852/article/details/84962037

版权

JavaScript+css+html 专栏收录该内容

82 篇文章 2 订阅

订阅专栏

offset系列

获取元素的相关的样式属性的值

1.没有脱离文档流

offsetTop 指元素距离上方或上层控件的位置
offsetLeft 指元素距离左方或上层控件的位置

节点对象.offsetLeft=父级元素的margin+父级元素的padding+父级元素的border+当前元素的margin
节点对象.offsetTop=父级元素的margin+父级元素的padding+父级元素的border+当前元素的margin

2.脱离文档流

节点对象.offsetLeft=当前元素的margin+当前元素的left
节点对象.offsetTop=当前元素的margin+当前元素的top

3.获取元素的宽高

节点对象.offsetWidth=边框+宽
节点对象.offsetHeight=边框+高

scroll系列

1.scrollWidth：元素中内容实际的宽，如果没有内容，就是元素的宽
2.crollHeight:元素中内容实际的高，如果没有内容，就是元素的高
3.scrollLeft：滚动条向上滚动出去的内容高度
4.scrollTop：滚动条向左滚动出去的内容宽度

//获取浏览器向上卷曲出去的距离的值，向左卷曲出去的距离
    function getScroll() {
        return {
            left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
            top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
        };
    }