页面可视区高度的获取

开发时,有时候需要获取页面可视区域的高度/宽度,比如滚屏设计、固定层等情况,用到document.documentElement.clientHeight和document.body.clientHeight,两者有什么区别,到底用谁?

先log一下看看他们的真面目:

可以发现document.documentElement是整个html文档的内容,而document.body只是整个body的内容。再看看他们的值的区别:当页面存在文档类型声明时(即有<!doctype>头),log一下,他们的值为:

当页面没有<!doctype>头时的结果为:

可以发现,他们的值刚好相反过来了,也就是说,他们的取值与<!doctype>头有关,也就是与兼容模式有关!我们要的是页面的可视区高度而不是整个页面的高度,显然是要获取小那个!

一种办法就是与所有的开发人员约定好一定全部要<!doctype>头声明(这个一般情况下都要加的),包括如果想要操作iframe,也要写上;另一种办法就是判断当前页面是否开启了兼容模式来作相应的处理,即通过document.compatMode属性来判断。在有<!doctype>头情况下document.compatMode的值为CSS1Compat,称为标准兼容模式开启,没有文档头声明情况下的值为BackCompat,称为标准模式关闭,可以通过这个属性来正确取舍,比如要获取页面的可视区高度iH时可以这么做:

var de = document.documentElement;
var db = document.body;
var cm = (document.compatMode === "CSS1Compat");
var iH = cm ? de.clientHeight : db.clientHeight;

这样,不管是加没加<!doctype>头声明都能正确的获取可视区高度了。

评论列表

除了广告和敏感话题言论之外,可以畅所欲言。
为自己起个简短易记的名字。
方便我可以联系到你,绝对不会被公开。
你的个人主页,链接会加在昵称上方便大家访问。