offsetWidth/offsetHeight、offsetLeft/offsetTop、offsetParent

栏目: CSS · 发布时间: 5年前

内容简介:接下来我们依然讨论盒模型中的offset系列:offsetWidth/offsetHeight、offsetLeft/offsetTop、offsetParent正如在上一篇文章

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

offsetWidth/offsetHeight、offsetLeft/offsetTop、offsetParent

offsetWidth/offsetHeight

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

  1. offsetWidth

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

    offsetWidth === border(left/right) + padding(left/right) + 内容的宽度(width);
    //或者
    offsetWidth === clientWidth + border(left/right);
  2. 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结构
<div id="outer" class="outer">
    <div id="inner" class="inner">
        <div id="center" class="center">

        </div>
    </div>
</div>

//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左边的距离)

offsetLeft/offsetTop 和 clientLeft/clientTop的区别

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

clientLeft/clientTop:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Visual C#从入门到精通(第8版)

Visual C#从入门到精通(第8版)

夏普 (John Sharp) / 周靖 / 清华大学出版社 / 2016-6-1

《Visual C#从入门到精通(第8版)》共27章,结构清晰,叙述清楚。所有练习均在Visual Studio 2015简体中文版上进行过全面演练。无论是刚开始接触面向对象编程的新手,还是打算迁移到C#的C、C++或Java程序员,都可以从《Visual C#从入门到精通(第8版)》汲取到新的知识。迅速掌握C#编程技术。一起来看看 《Visual C#从入门到精通(第8版)》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

随机密码生成器
随机密码生成器

多种字符组合密码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码