关于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和火狐中没 ...
随机推荐
- 吉哥系列故事--完美队形 - HDU 4513 (Manacher)
分析:刚开始的想法是匹配出来每个点的最大回文串,然后用每个点的最大不下降序找一个最小值,不过不明白为什么不对....很无奈,再匹配的时候加一些判断就可以过,或许还有什么没想到的地方吧..... 代 ...
- Java 单元测试Junit
@Test @Before @After 测试方法运行前执行Before动作(比如创建资源),运行后执行After动作(比如销毁资源) @BeforeClass @AfterClass 测试类运行前执 ...
- angularJS 指令二
指令详解1.用directive()方法来定义指令.directive('myDirective',function($timeout,userDefinedService){ return {};} ...
- Solr开发参考文档(转)
Solr开发文档 Solr 是一种可供企业使用的.基于 Lucene 的搜索服务器,它支持层面搜索.命中醒目显示和多种输出格式.在这篇文章中,将介绍 Solr 并展示如何轻松地将其表现优异的全文本搜索 ...
- STRUCTS 2 UPLOAD
{LJ?Dragon}[标题]structs2 上传文件中文乱码问题 {LJ?Dragon}[Daily] 1.配置struts.xml文件 <?xml version="1.0&qu ...
- HDOJ 5073 Galaxy 数学 贪心
贪心: 保存连续的n-k个数,求最小的一段方差... .预处理O1算期望. .. Galaxy Time Limit: 2000/1000 MS (Java/Others) Memory Lim ...
- Android中为图标加上数字--用于未读短信数提醒,待更新应用数提醒等
本文属于原创,转载请著名出处:http://flysnow.iteye.com/blog/906770 写道 在我们开发一些如短消息.应用商店等应用时,会考虑在短消息的图标上加上未读短信的数量,在应用 ...
- php导出excel不断刷新缓冲区的思路(转)
require('./db.class.php');$DB = new db();$DB->connect();//数据库链接 header("Content-Type: text/c ...
- [转] Javascript中数组与字典(即object)的使用
简述: 简单记录一下数据结构字典和数组, 其实在Javascript这种弱类型的脚本语言中,数组同时也就是字典,下面主要就是字典数组的简易使用 代码: 1. 数组中添加map <!DOCTYPE ...
- 浅谈Android架构之MVP,MVVM
概述 MVP(Model-View-Presenter)是传统MVC(Model-View-Controller)在Android开发上的一种变种.进化模式.主要用来隔离UI.UI逻辑和业务逻辑.数据 ...