网页高度计算方法
2012-10-11 13:42
239 查看
document.compatMode(声明是转的,只是为了记下来,以后好用啊。嘿嘿)
对于document.compatMode,很多朋友可能都根我一样很少接触,知道他的存在却不清楚他的用途。今天在ext中看到 document.compatMode的使用,感觉这个对于我们开发兼容性的web页面还是很有帮助,我们都知道,IE对盒模型的渲染在 Standards Mode和Quirks Mode是有很大差别的,在Standards Mode下对于盒模型的解释和其他的标准浏览器是一样,但在Quirks Mode模式下则有很大差别,而在不声明Doctype的情况下,IE默认又是Quirks Mode。所以为兼容性考虑,我们可能需要获取当前的文档渲染方式。document.compatMode正好派上用场,它有两种可能的返回值:BackCompat和CSS1Compat,对其解释如下:
BackCompat Standards-compliant mode is not switched on. (Quirks Mode)
CSS1Compat Standards-compliant mode is switched on. (Standards Mode)
在实际的项目中,我们还需要在获取浏览是否IE,这样就可以得到IE的渲染模式了。在Ext中的代码:isBorderBox=isIE&&!isStrict。
当文档有了标准声明时, document.compatMode 的值就等于 "CSS1compat", 因此, 我们可以根据 document.compatMode 的值来判断文档是否加了标准声明
var height = document.compatMode=="CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
document.compatMode用来判断当前浏览器采用的渲染方式。
官方解释:
BackCompat:标准兼容模式关闭。
CSS1Compat:标准兼容模式开启。
当document.compatMode等于BackCompat时,浏览器客户区宽度是document.body.clientWidth;
当document.compatMode等于CSS1Compat时,浏览器客户区宽度是document.documentElement.clientWidth。
浏览器客户区高度、滚动条高度、滚动条的Left、滚动条的Top等等都是上面的情况。
一个准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的代码:
if (document.compatMode == "BackCompat") {
cWidth = document.body.clientWidth;
cHeight = document.body.clientHeight;
sWidth = document.body.scrollWidth;
sHeight = document.body.scrollHeight;
sLeft = document.body.scrollLeft;
sTop = document.body.scrollTop;
}
else { //document.compatMode == "CSS1Compat"
cWidth = document.documentElement.clientWidth;
cHeight = document.documentElement.clientHeight;
sWidth = document.documentElement.scrollWidth;
sHeight = document.documentElement.scrollHeight;
sLeft = document.documentElement.scrollLeft == 0 ? document.body.scrollLeft : document.documentElement.scrollLeft;
sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
}
相关文章推荐
- 对于wkwebview网页高度计算的补充/网页高度计算的另一种简单方法
- 准确计算CoreText高度的方法:
- JS方法中,网页各种类型宽度(高度)获取
- IOS7中动态计算label的宽度和高度的方法
- 网页内容高度不够时,让footer处于页面底部的方法(不是固定在底部)
- boundingRectWithSize 7.0以后计算文本高度的方法
- Android中动态计算ListView高度方法(适用于ScrollView嵌套)
- 动态计算控件高度和宽度的方法
- 1014-34-首页15-计算原创微博的frame------计算cell的高度---计算 UILabel 的 CGSize 的方法
- 计算并设置ListView的高度,防止嵌套ScrollView监听出现问题,(两种方法,一种自定义,一种测量)
- CSS网页布局中的最小高度问题的解决方法
- jQuery设置指定网页元素宽度和高度的方法
- jQuery和JS:网页常用计算宽高的方法
- iOS中精确计算WebView高度的方法示例
- 网页宽度高度获取方法备忘
- android字体高度,宽度计算方法
- 使用jquery获取网页中图片高度的两种方法
- 网页图片变形解决方法-固定宽度高度按比例自动缩小CSS
- Android 获取控件高度宽度三种方法,防止0的出现,计算空间宽度,文字宽度
- .clear方法解决网页自适应高度的问题