关于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和火狐中没 ...
随机推荐
- 高效算法——E - 贪心-- 区间覆盖
E - 贪心-- 区间覆盖 题目链接:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=85904#problem/E 解题思路: 贪心思想, ...
- Access denied for user 'root'@'localhost' (using password:YES) 解决方案
1.打开MySQL目录下的my.ini文件,在文件的最后添加一行“skip-grant-tables”,保存并关闭文件. 2.重启MySQL服务. 3.在命令行中输入“mysql -uroot -p” ...
- Android Json数据解析
1.通过主Activity的Button按钮进行解析 public class MainActivity extends Activity { private Button button=null; ...
- DFS Zoj 2110
http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=2110 //2110 #include<stdio.h> #in ...
- 《Linear Algebra and Its Applications》-chaper3-行列式-从一个逆矩阵算法证明引入的行列式
这一章节开始介绍线性代数中另外一个基本概念——行列式. 其实与矩阵类似,行列式也是作为简化表述多项式的一种工具,关于行列式的历史渊源,有如下的介绍. 在介绍逆矩阵的时候,我们曾提及二阶矩阵有一个基于矩 ...
- 关于kali安装vmware的坑,linux套路太深。
http://www.linuxidc.com/Linux/2015-08/122240.htm 但是还有些坑 安装gcc5.4.1 apt-get install gcc-5 gcc-5所在目录 / ...
- [Rails Level 2] Ground up
1. Rails commends line: Example: rails new blog --skip-test-unit --database=postgresql
- android中Canvas使用drawBitmap绘制图片
1.主要的绘制图片方法 //Bitmap:图片对象,left:偏移左边的位置,top: 偏移顶部的位置 drawBitmap(Bitmap bitmap, float left, float ...
- bitbucket/github同一站点上多个git代码仓库的ssh-key配置
由于项目开发需要,可能多个项目都放在bitbucket或者github上面,每个项目都有独立的sshkey,这就会造成push时的系统默认取~/.ssh/id_rsa的问题. 最简单的解决方法是这样: ...
- SPOJ 3048 - DNA Sequences LCS
给出两个字符串(不长于1000),求最长公共子序列,要求:从每个串中取必须取连续k (1<=k<=100)个数 [LCS]一开始自己想用DP加一维[len]用来表示当前已经取了连续len个 ...