document和documentelement,document.createelement()

　　关于document.documentElement和document.body的scrollWidth、offsetWidth和clientWidth的进一步讨论

　　(scrollHeight、offsetHeight和clientHeight也可以根据这篇文章来理解。)

　　这是一个非常复杂的问题。让我们想象一下：

　　document . document element . scroll width document . document element . offsetwidthdocument . document element . client width document . body . scroll width document . body . offsetwidthdocument . body . client width

　　要测量的属性有6个，这6个属性应该放在4种情况下：

　　未指定DOCTYPE，网页内容不超过窗口宽度；没有指定DOCTYPE，网页内容超出窗口宽度。指定DOCTYPE，网页内容不超过窗口宽度；指定DOCTYPE，网页内容超出窗口宽度；

　　那么这四种情况要放到几个主流浏览器中，假设只有三种浏览器：

　　IEFirefoxChrome

　　算算，6 * 4 * 3。有72种情况需要测试。哦，我的上帝。而且不要指望火狐和Chrome的结果是一样的，也不要指望火狐不会给你混乱的结果，这样真的很烦。

　　简化应用分析。

　　72个考试情境确实很烦，但是当我们回头看的时候，我们真正想要的是什么？

　　我想我们想要两样东西：

　　一个是scrollWidth(scrollHeight)。虽然不是很有用，但应该比offsetWidth(offsetHeight)有用多了。它表示文档区域的宽度(高度)。比如一个网页，尤其是门户网站，长时间拖动，就需要统计所有没有显示的内容。第二个是viewport，也就是clientWidth，也就是窗口中可以显示内容的区域，也就是我们经常看到页面上飞来飞去的广告，飞来飞去，撞到边缘弹跳的区域。

　　试验结果

　　结果很复杂，我就不说了。这里我只说一下如何在实践中使用：

　　要使用scrollWidth，请取文档的最大值；document.body.scrollWidth和document身体；滚动宽度；若要使用clientWidth，如果document . document element . client width为0，请使用document . document element . client width，否则，请使用document.body.clientWidth

　　表达式是：

　　var scroll width=math . max(document . document element . scroll width，document . body . scroll width)；var client width=document . document element . client width document . body . client width；

　　开始工作

　　ScrollWidth，offsetWidth，clientWidth兼容性测试文件

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。