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

        今天上网看了一些文章，使用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;        }

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

如果不去理会1px的误差，那么可以认定，offsetLeft及offsetTop也是相对于它的满足position不为static.的最低的父级元素而言的，如果不存在这样的父级元素，那么相对的就是body，也就是一整个浏览器。

后话：这是写的第二篇文章，感觉csdn的这一个编辑器不知道为什么一直用的非常不习惯，想要直接在WPS中直接写完了之后再粘贴进来就发生了很大的错误，想要调整则编辑器中的内容还是不尽人意。文字的格式如果第一次不对，再调整会很困难，图片要上传才可以放上来。哎，纠结中，要冷静，冷静才行。