offsetWidth/offsetHeight、offsetLeft/offsetTop、offs

JellyBool 发布于2019-08-23 14:57 / 1632人阅读

摘要：因为一旦我们给父元素设置了会影响文档流。是指当前元素相对于父级参照物的偏移量。在标准浏览器中是指当前元素的左边框的外沿到父级参照物边框的内沿，如上图中的，，所示。盒子上边框的高度。

接下来我们依然讨论盒模型中的offset系列：offsetWidth/offsetHeight、offsetLeft/offsetTop、offsetParent

offsetWidth/offsetHeight

正如在上一篇文章https://segmentfault.com/a/11...，在这里在写一遍，希望把几个类似的词放在一起去理解可以更好的区分他们的意思。

offsetWidth

就是当前元素的宽度width，包括边框、padding、以及内容的宽度，即：

offsetWidth === border(left/right) + padding(left/right) + 内容的宽度(width);
//或者
offsetWidth === clientWidth + border(left/right);

offsetHeight

就是当前元素的高度height，包括边框、padding、以及内容的高度，即：

offsetHeight === border(top/bottom) + padding(top/bottom) + 内容的高度(height);
//或者
offsetHeight === clientHeight + border(top/bottom);

offsetParent

offsetParent:是指父级参照物。父级参照物不是父级元素，父级参照物与父级元素无关。父级参照物默认是body，如果我们给当前元素的父元素设置了position(等于relative|absolute|fixed)在会改变父级参照物。因为一旦我们给父元素设置了position会影响文档流。
例如有这样的文档结构：

//DOM结构

    
        

        
    


//css
 .outer{
        width: 260px;
        height: 260px;
        border: 20px solid red;
        margin: 20px auto;
    }
 .inner{
        width: 160px;
        height: 160px;
        border: 20px solid green;
        margin: 20px auto;
    }
 .center{
        width: 60px;
        height: 60px;
        border: 20px solid blue;
        margin: 20px auto;
    }

我们可以在控制台这样查看center、inner、outer的父级参照物

center.offsetParent.tagName //=> "BODY"
inner.offsetParent.tagName   //=> "BODY"
outer.offsetParent.tagName   //=> "BODY"

由此可以说明，如果不给div设置position属性，那么默认的div的父级参照物都是body

下面我们给outer、inner都设置了position:relative会发生什么？

//DOM不发生变化，我们把CSS修改成下面这样
.outer{
    ***position: relative;***
    width: 260px;
    height: 260px;
    border: 20px solid red;
    margin: 20px auto;
}
.inner{
    ***position: relative;***
    width: 160px;
    height: 160px;
    border: 20px solid green;
    margin: 20px auto;
}
.center{
    width: 60px;
    height: 60px;
    border: 20px solid blue;
    margin: 20px auto;
}

此时我们在控制台查看center、inner、outer的父级参照物

center.offsetParent   //=> div#inner.inner
inner.offsetParent    //=> div#outer.outer
outer.offsetParent    //=> body

由此可见，给父级设置position可以改变父级参照物。

offsetLeft/offsetTop

offsetLeft/offsetTop:是指当前元素相对于父级参照物的偏移量。
在标准浏览器中是指：当前元素的左边框的外沿到父级参照物边框的内沿，如上图中的4，5，6所示。
在IE8中，offsetLeft是指：当前元素的左边框的外沿到父级参照物的外沿，如上图中的7，8，9所示。

用offsetLeft/offsetTop我们可以计算出当前元素的左上角坐标（即当前元素距离body顶部和body左边的距离）

var offset = function (curEle) {
    var topY = curEle.offsetTop,
        leftX = curEle.offsetLeft,
        parent = curEle.offsetParent;

    while (parent.tagName !== "BODY") {
        if (!/MSIE 8/i.test(navigator.userAgent)) {
            topY += parent.clientTop;
            leftX += parent.clientLeft;
        }
        topY += parent.offsetTop;
        leftX += parent.offsetLeft;
        parent = parent.offsetParent;
    }
    return {X: leftX , Y: topY};
}

offsetLeft/offsetTop 和 clientLeft/clientTop的区别

offsetLeft/offsetTop：是指当前元素相对于父级参照物的偏移量。

clientLeft/clientTop：

 //clientLeft:盒子左边框的宽度。
 clientLeft === paddingLeft;
 //clientTop:盒子上边框的高度。
 clientTop === paddingTop;

GPU云服务器云服务器 off off移除事件 js off方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/101418.html

Js中关于top、clientTop、scrollTop、offsetTop

摘要：由于为外层元素设置了，所以内层元素会向上卷。和全面支持，而和不支持除外。认为是网页内容高度，不过最小值是。认为和都是网页内容高度，只不过当网页内容高度小于等于时，的值是，而可以小于。认为是可视区域滚动条加边框。转载自http://www.cnblogs.com/seven_...网页可见区域宽： document.body.clientWidth;网页可见区域高： document....

xorpay 2019-08-20 12:01 评论0 收藏0
容易混淆的client-*,scroll-*,offset-*

摘要：容易混淆上来不说话，先抛出几个问题是时候谈谈它们之间的区别了，是不是已经混乱了好吧，一步一步来搞清楚这些东西是啥。要搞清这几个容易混淆的概念，我的建议是运行文章中的例子。和类似于和，不同的是不包含边框大小。容易混淆client-*,scroll-*,offset-* Truth comes from practice 上来不说话，先抛出几个问题： offsetWidth offs...

Jokcy 2019-08-19 18:44 评论0 收藏0
容易混淆的client-*,scroll-*,offset-*

摘要：容易混淆上来不说话，先抛出几个问题是时候谈谈它们之间的区别了，是不是已经混乱了好吧，一步一步来搞清楚这些东西是啥。要搞清这几个容易混淆的概念，我的建议是运行文章中的例子。和类似于和，不同的是不包含边框大小。容易混淆client-*,scroll-*,offset-* Truth comes from practice 上来不说话，先抛出几个问题： offsetWidth offs...

tolerious 2019-08-01 15:27 评论0 收藏0
js获取元素的距离父元素、窗口的距离offsetTop,offsetHeight,clientHei

摘要：前言相信很多项目中都会有这样一个小需求端，移动端则是点击，鼠标移上某个菜单或者某个位置，显示一个弹出框，移开则隐藏弹出框，就是中效果，这种通常做法是每个子菜单下都有一个弹框，父元素相对定位，子元素绝对定位，只需要控制的弹框的显示与隐藏即可，前言相信很多项目中都会有这样一个小需求（PC端，移动端则是点击），鼠标移上某个菜单或者某个位置，显示一个弹出框，移开则隐藏弹出框，就是css中h...

张宪坤 2019-08-22 16:11 评论0 收藏0
js获取元素的距离父元素、窗口的距离offsetTop,offsetHeight,clientHei

摘要：前言相信很多项目中都会有这样一个小需求端，移动端则是点击，鼠标移上某个菜单或者某个位置，显示一个弹出框，移开则隐藏弹出框，就是中效果，这种通常做法是每个子菜单下都有一个弹框，父元素相对定位，子元素绝对定位，只需要控制的弹框的显示与隐藏即可，前言相信很多项目中都会有这样一个小需求（PC端，移动端则是点击），鼠标移上某个菜单或者某个位置，显示一个弹出框，移开则隐藏弹出框，就是css中h...

draveness 2019-08-30 14:25 评论0 收藏0