网页高度计算方法

news/2024/7/7 13:21:54

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;
}

转载于:https://www.cnblogs.com/wcLT/archive/2012/10/11/2719802.html


http://www.niftyadmin.cn/n/1478532.html

相关文章

linux系统中软盘的名称,linux中软盘的使用

linux中软盘的使用发布时间:2008-04-16 01:28:21来源:红联作者:nutra前两天去面试,做了一份试卷,就一道题没答出来,那张卷子的第一道题,“linux下怎么挂载软盘“后面其它的写脚本什么的都搞定了,就这一个卡了&#xff…

linux系统解压.tar.gz文件命令,linux中tar命令怎么解压.tgz与.tar.gz文件-linux-操作系统-壹聚...

在linux中.tgz是.tar.gz的缩写,我们在解压.tgz文件时可直接使用tar命令来操作,有需要了解的朋友可参考参考。如:将文件解压在当前目录:代码如下复制代码tar zxvf MY_NAME.tgz 或者 tar zxvf MY_NAME.tar.gz例:查看usr.tar备份文…

linux驱动无法绑定,LINUX驱动手动绑定和解绑定

Linux内核从2.6.13-rc3开始,提供了在用户空间,可动态的绑定和解绑定设备和设备驱动之间关系的功能。在这之前,只能通过insmod(modprobe)和rmmod来绑定和解绑,而且这种绑定和解绑都是针对驱动和所有设备的。而新的功能可以设置驱动…

管道文件 linux 流程图,怎样绘制工艺管道仪表流程图(PID图)和工艺流程图

工艺流程图是化工生产的技术核心,包含了物料平衡、设备、仪表、阀门、管路等信息,无论是设计院的工程师、化工厂的工艺员,还是中控控制室的主操,能看能画工艺流程图,都是必不可少的技能。今天昌晖仪表向大家介绍工艺流…

Adobe将于2020年末停止对Flash的支持

Adobe宣布将在2020年末终止Flash服务。各大浏览器供应商已经分别发布了时间线,概述了在浏览器上逐步淘汰这项技术的计划。\\Adobe最终决定终结Flash,建议网页开发者使用HTML5作为替代:\\\Adobe计划终结Flash。我们将于2020年末停止对Flash Pl…

linux无人值守安装实验,linux无人值守安装实验报告.docx

Linux 无人值守安装实验报告组员:董波英、王云涛、高锦峰 2008.12/9 星期二方案介绍首先设置一个启动服务器和一个安装服务器(可以配置在同一台物理机上) ,然后通过网络 启动存放在启动服务器上的安装程序。 安装程序会自动访问存放在安装服务器上的安装…

选择Citrix XenServer的五个理由

Citrix XenServer提供了服务性能卓越、高可扩展性、使用简便的虚拟化基础架构,且具有创新的存储集成能力,使IT部门能够在交付应用的同时降低成本、提高推向市场的速度。 介绍自2006年首次面市以来,已有数十万用户部署了Citrix XenServer &a…

docker 主进程 日志_迁移到微服务与DevOps,微服务和Docker容器的全面实用指南

迁移到微服务与DevOps,改变软件开发效能!一如既往,技术行业正处于巨大的转变之中,物联网、软件定义网络以及软件即服务(SaaS)仅为其中几例。由于这些创新,对能够改进应用开发和部署过程的平台和架构的需求很大。各种规…