正确理解JavaScript位置和大小(1)与大小相关的DOM属性的应用

在web开发中，计算元素的大小和位置是不可避免的。解决这个问题的办法就是使用DOM提供的一些API结合兼容性处理。所有内容在大约三篇文章中解释。作为第一篇文章，本文介绍了DOM提供的与大小相关的DOM属性，提供了一些兼容性处理方法，并结合常见场景说明了如何正确使用这些属性。

1.正确理解offsetWidth、clientWidth、scrollWidth以及对应的高度属性。

假设一个元素的水平和垂直滚动条被拖动到最后，相应的offsetWidth、clientWidth、scrollWidth和其他属性的范围如下图所示：

1)offsetwithts和offsetHeight对应于盒子模型的宽度和高度，这两个值与我们在使用chrome查看元素时看到的尺寸一致：

2)scrollWidth，对应scrollHeight是滚动区的宽度和高度，但不包括滚动条的宽度！滚动区域由填充和内容组成。

3)clientWidth和clientHeight对应的是去掉边框后的盒子模型部分的宽度和高度，不包括滚动条的宽度。

4)对于任何DOM元素，都可以通过以下api快速获取offsetWidth、clientWidth、scrollWidh以及相关的高度属性：

//domE是一个DOM Html Element对象domE . scrollwidthdome . scrollheighttdome . client width domE . client heighttdome . offsetwiththome//domE是一个DOM Html Element对象domE . scrolwidthdome . scrollheightthome . client width domE . client heightthome . offsetwiththome . offseththome .

5)这些属性在包括pc和手机在内的现代浏览器中几乎没有兼容性问题，可以放心使用。如果想了解详细的兼容性规则，可以参考以下2篇文章：

W3C DOM兼容性CSS对象模型视图

cssom视图模式的安排和介绍。

下面对普通html元素、html根元素、body元素的上述相关属性逐一进行测试，以此来验证前面的结论，总结一些可以在实际编码过程中直接使用的经验和技巧。之所以要区分普通的html元素、html根元素和body元素，是因为按照之前的理论，html根元素和body元素中会有一些奇怪的东西，需要谨慎处理。

注意：

1.为了减少篇幅，考试贴的代码不全，但不影响学习参考。此外，本文给出的测试结果均在chrome(版本：45.0)下运行。如果测试结果不同，也会给出IE9、IE10、IE11、firefox(版本：42.0)和opera(版本：34.0)的测试。

2.由于设备限制，safari暂时不会进行测试。而且和chrome内核一样，在支持标准上的可靠性也差不了多少。

3.老版本的Chrome、Firefox、Opera因为设备的限制无法测试。然而，考虑到浏览器对标准的支持程度，这三种浏览器从很早的版本开始就相对于W3C标准来说比较常规。另外，这些浏览器更新速度比较快，现在市面上这些浏览器的主流版本都比较新。

4.由于不考虑IE8及以下版本，html现在使用html5，所以不考虑document.compat mode=' back compat '的情况。即使是IE6类的浏览器引入了BackCompat模式，document.compat mode=' back compat '对于chrome、firefox等也是存在的。比如你用chrome打开下面的网页，在控制台中打印document.compatmode，你会发现它的值也是BackCompat(原因是页面使用了html4.0的dtd，如果改成html4.01的dtd就不会出现在chrome和firefox中了):

3358 samples . msdn . Microsoft.com/workshop/samples/author/DHTML/refs/compatMode compat.htm您可以通过以下资源了解关于compatMode的更多信息：

https://developer.mozilla.or