关于Chrome(谷歌浏览器)对docume,准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top
对于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。其中前者是怪异模式,后者是标准模式。
IE默认是BackCompat模式,Gecko内核的浏览器只在table中图片层上不同,可以看为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;
}
(以上代码兼容目前流行的全部浏览器,包括:IE、Firefox、Safari、Opera、Chrome)
关于Chrome(谷歌浏览器)对docume,准确获取网页客户区的宽高、滚动条宽高、滚动条Left和Top的更多相关文章
- Chrome扩展之css used 获取网页样式
地址栏输入: chrome://extensions/ 然后获取更多扩展程序,得到css used 复制html节点 最后点击 "css used" 把样式全部复制下来即可 (记住 ...
- 通过chrome console 快速获取网页连接
通过chrome console 快速获取网页连接 var ip = document.getElementsByClassName("jDesc"); var str = &qu ...
- 爬虫 Http请求,urllib2获取数据,第三方库requests获取数据,BeautifulSoup处理数据,使用Chrome浏览器开发者工具显示检查网页源代码,json模块的dumps,loads,dump,load方法介绍
爬虫 Http请求,urllib2获取数据,第三方库requests获取数据,BeautifulSoup处理数据,使用Chrome浏览器开发者工具显示检查网页源代码,json模块的dumps,load ...
- 第三百五十二节,Python分布式爬虫打造搜索引擎Scrapy精讲—chrome谷歌浏览器无界面运行、scrapy-splash、splinter
第三百五十二节,Python分布式爬虫打造搜索引擎Scrapy精讲—chrome谷歌浏览器无界面运行.scrapy-splash. splinter 1.chrome谷歌浏览器无界面运行 chrome ...
- 三十一 Python分布式爬虫打造搜索引擎Scrapy精讲—chrome谷歌浏览器无界面运行、scrapy-splash、splinter
1.chrome谷歌浏览器无界面运行 chrome谷歌浏览器无界面运行,主要运行在Linux系统,windows系统下不支持 chrome谷歌浏览器无界面运行需要一个模块,pyvirtualdispl ...
- Chrome(谷歌浏览器) 程序开发32个经常使用插件
Chrome(谷歌浏览器) 程序开发32个经常使用插件 谷歌浏览器(Chrome)在2008年底才公布.但非常快它已成为火狐(Firefox)有力竞争对手. 之前. ...
- js获取网页屏幕可视区域高度
document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.document ...
- 【转】如何在Windows+VS2005使用最新静态libcurl 7.35.0获取网页数据,支持HTTPS
地址: http://blog.csdn.net/hujkay作者:Jekkay Hu(34538980@qq.com)关键词:Windows,curl,ssl, visual c++ 2005, ...
- 如何解决谷歌浏览器下jquery无法获取图片的尺寸
代码如下: $(document).ready(function(){ var img_h=$img.height(); var img_w=$img.width(); }) 以上代码在IE和火狐中没 ...
随机推荐
- Mac下Intellij IDea发布Web项目详解一
Mac下Intellij IDea发布Web项目详解一 Mac下Intellij IDea发布Java Web项目(适合第一次配置Tomcat的家伙们)详解二 Mac下Intellij IDea发布J ...
- centos 5 yum安装与配置vsFTPd FTP服务器
vsftpd作为FTP服务器,在Linux系统中是非常常用的.下面我们介绍如何在centos系统上安装vsftp. 什么是vsftpd vsftpd是一款在Linux发行版中最受推崇的FTP服务器程序 ...
- Tomcat配置NIO
tomcat的运行模式有3种.修改他们的运行模式.3种模式的运行是否成功,可以看他的启动控制台,或者启动日志.或者登录他们的默认页面http://localhost:8080/查看其中的服务器状态. ...
- Hibernate详解(5)——Hibernate核心接口和工作原理
Hibernate核心接口 Hibernate有五大核心接口,分别是:Session Transaction Query SessionFactoryConfiguration .这五个接口构成了Hi ...
- Thread Join()的用法
Java Thread类有个 join() 方法,先前一直不知道是怎么用的,直到看到这篇文章.http://auguslee.iteye.com/blog/1292203 Java Thread中, ...
- [ES6] Array.find()
Convenient method to find one item in an array, avoid writing and for + if: let arys = [1,,5,,6] ; ...
- mysql @变量和变量的区别及怎么判断记录唯一性
DELIMITER// drop PROCEDURE if EXISTS test.express; create PROCEDURE test.express() BEGIN ) into @a f ...
- Git学习之添加远程仓库
好久没有写过博客了,只因人生世事无常! 前言:说实话,早就听说了Git这个代码管理工具的NB之处,却一直没有时间好好学习下.现在终于有时间学习一下这个伟大的工具,在此写下在学习过程中遇到的问题! 推荐 ...
- sbt 配置
1. SBT使用local maven repository,下载的库依然放在 ~/.m2/repository 2. SBT assembly 会把依赖库打包到一个jar包,需要使用assembly ...
- C#中的IO流操作(FileStream)
StreamReader和StreamWriter适用于对文本文件的操作,因为它是以字符为单位进行的操作 不用担心编码问题 using (Stream s = new FileStream(@&quo ...