注:(scrollHeight、offsetHeight、clientHeight 同样可按本文去理解。)
这是一个很复杂的问题,让我们想像一下:
- document.documentElement.scrollWidth
- document.documentElement.offsetWidth
- document.documentElement.clientWidth
- document.body.scrollWidth
- document.body.offsetWidth
- document.body.clientWidth
有 6 个属性要测,这 6 个属性要放在 4 种情况中:
- 没有指定 DOCTYPE,网页内容没有超过窗口宽度;
- 没有指定 DOCTYPE,网页内容超过窗口宽度;
- 指定 DOCTYPE,网页内容没有超过窗口宽度;
- 指定 DOCTYPE,网页内容超过窗口宽度;
然后这 4 种情况要放到几个主流浏览器中,假设只有 3 种浏览器:
算一下,6 * 4 * 3,有 72 种情况要测试,天啊。并且不要指望 Firefox 和 Chrome 结果是一样的,不要指望 Firefox 不会出现让您费解的结果,所以这真是一件恼火的事。
从应用入手简化分析
72 种测试情况确实很恼火,但我们回过头来一想,我们到底想要什么?
我认为我们想要两个东西:
- 一是 scrollWidth(scrollHeight),虽然它用处不大,但应该比 offsetWidth(offsetHeight)有用得多。它表示的是文档区的宽度(高度),比如一个网页,特别是门户网站,拖很长,就要把没有显示出来的内容都计算进去。
- 二是视口 viewport,就是 clientWidth,就是窗口中可显示内容的那块区域,就是我们常常看到页面上飞行广告,飞来飞去,碰到边边要反弹的那一块。
测试结果
结果很复杂,就不说了,这里只说实际中怎么使用:
- 要使用 scrollWidth,取 document.documentElement.scrollWidth 与 document.body.scrollWidth 的最大值;
- 要使用 clientWidth,如果 document.documentElement.clientWidth > 0,则使用 document.documentElement.clientWidth,否则使用 document.body.clientWidth。
表达式为:
- var scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
- var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
(补充:clientWidth 在框架页面frameset有问题, 在非标准页面获得的document.documentElement.clientWidth 为整个框架的高度 )
分享到:
相关推荐
火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
document.documentElement && document.documentElement.scrollTop
用javascript地址栏显示源码: javascript:s=document.documentElement.outerHTML;document.write('<body></body>');document.body.innerText=s;
Vue中document.body.scrollTop的值总为零的解决办法 最近在做vue的时候监听页面滚动发现document.body.scrollTop一直为0 但是发现document.body.scrollTop一直是0。 查资料发现是DTD的问题。 页面指定了DTD,即指定...
if (document.documentElement && document.documentElement.scrollTop) diffY = document.documentElement.scrollTop; else if (document.body) diffY = document.body.scrollTop else {/*Netscape ...
IE6在页面内容超出窗口大小时将宽度属性scrollWidth、clientWidth、offsetWidth都解释为内容实际宽度。 上次的测试说明了document.body属性并不会给我们返回预期的结果,比如我们用document.body.clientHeight原本想...
scrW = document.body.scrollWidth; scrH = document.body.scrollHeight; } else if(document.body) { // IE Mac scrW = document.body.offsetWidth; scrH = document.body.offsetHeight; } var...
小球在桌面上自由移动,要清楚的几个问题 ...宽:document.documentElement.clientWidth || document.body.clientWidth; 高:document.documentElement.clientHeight || document.body.clientHeight;
[removed] function shownode() { var ohtml = document.documentElement; //alert(ohtml.nodeName); //alert(ohtml.childNodes.length); //alert(ohtml.childNodes[1].nodeName); //获取...
document.documentElement.scrollTop在Chrome里总为0document.body.scrollTop 在IE和firefox里总为01、各浏览器下 window.pageYOffset/document.documentElement.scrollTop/document.body.scrollTop的差异示例:...
一个对XmlDocument的DocumentElement 以及其属性Attributes进行访问的类库函数。
对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途。其实这个对于我们开发兼容性的web页面还是很有帮助,我们都知道,盒模型的渲染在 Standards Mode和Quirks Mode是有很大...
JavaScript获取网页的宽高及如何兼容详解 很多场景下会需要获取当前网页的宽高来达到一些... console.log(document.documentElement.clientWidth); console.log(document.documentElement.clientHeight); docum
body是DOM对象里的body子节点,即body标签,documentElement 是整个节点树的根节点root,详细介绍请看本文,感兴趣的朋友可以参考下
document.body.clientWidth – 网页可见区域宽 document.body.clientHeight – 网页可见区域高 document.body.offsetWidth – 网页可见区域宽,包括边线和滚动条的宽 document.body.offsetHeight – 网页可见区域高...
= “number”){ if(document.compatMode == “number”){ pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; }else{ pageWidth = document.body.clie
$(document.body).xpath("count(ancestor::node())"); // Returns {Number} 2 (2 ancestor nodes) $(document.body).xpath("preceding-sibling::element()"); // Returns {Element} head (prev sibling) $(document....
var clientHeight = (document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight; } else { var clientHeight = (document....