JavaScript中尺寸、坐标一、尺寸二、坐标

测试环境是IE8，Chrome38，Firefox40，下面是全局通用脚本打印代码

在container外面我还套了个container_out，宽度为1000px，方便演示用，HTML代码如下：

1）CSS获取width、height

 分别在container中，width写为200px、10%和不设置。

在3个浏览器中展现的有所不同，如下面表格中所示，IE展现的就是比较与众不同：

firefox

chrome

IE8

width:200px

200px

width:10%

100px

10%

宽度不设置

956px

 auto

display:none;width:200px

display:none;宽度不设置

auto

position:absolute;width:200px

position:absolute;宽度不设置

0px

2）offsetWidth、offsetHeight

这里获取到的数据是没有单位的，浏览器结果如下：

224

124

980

 980

24

结合公式和第一张表中对应的数据可以计算出结果

当display:none的时候，得到的数据都为0

3）innerWidth、innerHeight、outerWidth和outerHeight

这4个window属性在IE6、IE7和IE8不支持。

在Chrome中，outerWidth.outerHeight与innerWidth，innerHeight返回相同的值，即视口(viewport)大小而非浏览器窗口大小。

innerWidth

1366

undefined

outerWidth

1382

这里顺便介绍两个概念：「css像素」、「设备像素」；css像素和设备像素 是容纳的关系。在缩放倍数是200%的情况下，1个css像素容纳了4个设备像素

我用chrome浏览器，“control+鼠标滚轮”进行放大，放到到200%的时候“innerWidth=683”，正好是原来的一半。

所以window.innerWidth度量单位是css pixels。经测试，“offsetWidth”与“clientWidth”也是css pixels，而“screen.width”是设备像素。

4）clientWidth、clientHeight

clientWidth

1349

1345

5）scrollWidth、scrollHeight

FF：scrollWidth = 网页内容宽度，不过最小值是clientWidth

scrollWidth

接下来的操作会将#container隐藏掉，CSS添加一条属性：display: none;

1）offsetTop、offsetLeft

它们是相对于offsetParent的距离，一级级向上累加，就得到相对页面的坐标。

top

350

left

200

2）node.getBoundingClientRect()

在IE8或者更低浏览器版本中，getBoudingClientRect()方法返回的对象中没有height和width属性。

1.外面不套relative

left和top与上面的CSS中定义的一样。

250

100

width

30

height

2.外面套个relative

与上面累加计算的结果一致，可以看到自己会做计算：

left = left + 父级的left；top = top + 父级的top。

3）clientLeft、clientTop

在coordinate中加了border: 2px solid red，三个浏览器返回的都是2

4）scrollTop、scrollLeft和pageYOffset、pageXOffset

“外层元素中的内容”高过了“外层元素”本身.当向下拖动滚动条时，有部分内容会隐没在“外层元素的上边界”之外。

我给body设置了高度2000px，然后把滚动条下拉到最下面做测试：

window.pageYOffset

1392

1317

document.documentElement.scrollTop

1416

document.body.scrollTop

在做IE8的测试的时候，每次返回的都是0，无奈只能写个onscroll事件，实时添加高度，并在html中新增标签p：

通过上面的数据可以看到，虽然数字不一样，但是都是通过不太一样的属性获取到的，所以需要做兼容性的处理：

demo下载：

<a href="http://download.csdn.net/detail/loneleaf1/9132279" target="_blank">http://download.csdn.net/detail/loneleaf1/9132279</a>

参考资料：

    本文转自 咖啡机（K.F.J）   博客园博客，原文链接：http://www.cnblogs.com/strick/p/4826273.html，如需转载请自行联系原作者