Analysis of the reasons for replacing document.body with document.documentElement_javascript skills

When the page content exceeds the window size, IE6 interprets the width attributes scrollWidth, clientWidth, and offsetWidth as the actual width of the content.
The last test showed that the document.body property does not return us the expected results. For example, we used document.body.clientHeight to get the "height of the visible area of ​​the page", but what we actually returned was "the actual height of the page." content height".
Then what should we do? Could it be that after adding the document DTD type, it is no longer possible to obtain attributes such as "visible area height" and "actual content width"?

Copy code The code is as follows:

scrollTop（滚动条卷过的高）：
scrollLeft（滚动条卷过的宽）：
scrollHeight（内容实际高度）：
scrollWidth（内容实际宽度）：
clientWidth（可见区域宽）：
clientHeight（可见区域高）：
offsetWidth（加滚动条宽？）：
offsetHeight（加滚动条高？）：
screenTop：
screenBottom：
screenLeft：
sheight（分辨率高）：
swidth（分分辨率宽）：
availHeight：
availWidth：

内容高度是400PX，点击查看所有属性值

其实，我们可以用document.documentElement代替document.body来获取我们想要的结果 将代码中的document.body替换为document.documentElement，再来看看各浏览器下的实际结果：
ii测试结果表明，IE系列浏览器对document.documentElement属性的解释是正确的，其它标准浏览器将offsetHeight解释成 了scrollHeight。火狐和netscape更是把这两个属性调换了过来。不过总的来说各属性都可以有个相应的解释，不会像 document.body一样只有可怜的两种解释。

终于可以放心地使用JS方法获取各种页面高宽属性了吧^_^!