offsetWidth,offsetHeight,offsetLeft,offsetTop相关的小实验

最新推荐文章于 2021-07-13 01:12:44 发布

小鱼爱花

最新推荐文章于 2021-07-13 01:12:44 发布

阅读量918

点赞数

分类专栏： javascript 文章标签： offsetTop offsetLeft offsetWidth offsetHeight

本文链接：https://blog.csdn.net/fishecho/article/details/8664204

版权

javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

今天上网看了一些文章，使用javascript对元素不同的top,left,width,height进行定位，看的眼花缭乱，索性自己在宿舍动手实验一番。

下面对以offset开关的进行实验操作。

首先新建一个页面，这一个页面中有两个div,如下所示：

<div class="outter" id="outter">
    <div class="inner" id="inner">你好，这里是我的地盘</div>
</div>

之后对outter和inner分别设置它们的css如下：

<style type="text/css">
        body,div,p{
            margin:0px;
            padding:0px;
        }
        .outter{
            width:500px;
            height: 500px;
            margin-top:100px;
            margin-left:115px;
            padding-top:10px;
            border:1px solid #ff0000;
            overflow: hidden;
        }
        .inner{
            width:200px;
            height: 300px;
            padding-top:10px;
            padding-left:15px;
            margin:auto;
            border:1px solid #3392fd;
        }
</style>

下面是这个页面出现的效果：

下面再书写javascript并对其进行检查（如果是在ie中，那么是没有办法使用console.log()的，这个时候则使用alert（）来代替它的检查，在这里忽略不写）：

<script type="text/javascript">
    myOut = document.getElementById("outter");
    myIn = document.getElementById("inner");
    console.log("myIn.offsetWidth:" + myIn.offsetWidth);
    console.log("myIn.offsetHeight:" + myIn.offsetHeight);
    console.log("myIn.offsetTop:" + myIn.offsetTop);
    console.log("myIn.offsetLeft:" + myIn.offsetLeft);
</script>

下面得到在ie7以上的各个浏览器所展示的结果：

下面结合outter和inner这两个div的结构，分析上面的offsetWidth,offsetHeight,offsetLeft及offsetTop的出现

1. 首先看offsetWidth和offsetHeight，分析div inner:

 .inner{
            width:200px;
            height: 300px;
            padding-top:10px;
            padding-left:15px;
            margin:auto;
            border:1px solid #3392fd;
        }

width+(padding-left)+border=200px + 15px + 2px=217px;

height+(padding-top)+border=300px + 10px + 2px = 312px;

而在chrome中为什么offsetWidth及offsetHeight会多出那两个px呢。下面查看chrome表现出来的metrics:

由此可以看到，在chrom中的border都是以1.5px来作为1px最终展示出来的效果的，但是还是有1px不知道是在哪里出现的，在这里就不深入再找下去了。

总结来说：offsetWidth及offsetHeight就是某一个块级元素的本身的宽度+内边距+边框/高度+内边距+边框，也就是它的可视化部分的宽度和高度了。

2. 看offsetLeft和offsetTop:

再次查看outter和inner div的css:

	.outter{
            width:500px;
            height: 500px;
            margin-top:100px;
            margin-left:115px;
            padding-top:10px;
            border:1px solid #ff0000;
            overflow: hidden;
        }
       
 	.inner{
            width:200px;
            height: 300px;
            padding-top:10px;
            padding-left:15px;
            margin:auto;
            border:1px solid #3392fd;
        }

在这里可以看到inner的左边界到outter的左边界的距离为(500 - 200 - 15) / 2px = 142px,刚好等于在ie7中出现的offsetLeft.

而inner的左边界到浏览器的左边界的距离内里为115px + 142px = 258,刚好等于在ie8,firefox,chrome中出现的offsetLeft.

对应到offsetTop也是同样的原理。

总的来说：offsetLeft及offsetTop,在ie7中，它们是块级元素的左边框相对于它们的父级元素的左边框的距离，而在ie8，chrome，firefox中则是相对于浏览器的左边界。

但是，上面的总结是不是真的正确呢？之前有接触过，如果一个元素想要使用left和top的时候，那么，第一，它必须是非static的元素。第2，如果它是absolute,则它所拥有的定位是相对于最低的那个position不为static的父级元素进行定位，如果不存在这样的父级元素，则它相对于body进行定位。那么在这里，如果这个元素它的position不为默认，那offsetTop及offsetLeft会不会产生变化呢？

下面在div inner中加上position:relative:

.inner{
            width:200px;
            height: 300px;
            padding-top:10px;
            padding-left:15px;
            margin:auto;
            position: relative;
            border:1px solid #3392fd;
        }

但是浏览器出现的结果还是没有变化。继续向div outter中加上position:relative:

.outter{
            width:500px;
            height: 500px;
            margin-top:100px;
            margin-left:115px;
            padding-top:10px;
            border:1px solid #ff0000;
            position: relative;
            overflow: hidden;
        }

浏览器终于出现了不一样的结果：