js获取不同浏览器盒子宽度高度
DTD
已声明
IE
document.documentElement.scrollHeight
浏览器所有内容高
度
,document.body.scrollHeight
浏览器所有内容高度
document.documentElement.scrollTop
浏览器滚动部分高度,
document.body.scrollTop
始终为
0
document.documentElement.clientHeight
浏览器可视部分高度,
document.body.clientHeight
浏览器所有内容高度
FF
document.documentElement.scrollHeight
浏览器所有内容高
度
,document.body.scrollHeight
浏览器所有内容高度
document.documentElement.scrollTop
浏览器滚动部分高度,
document.body.scrollTop
始终为
0
document.documentElement.clientHeight
浏览器可视部分高度,
document.body.clientHeight
浏览器所有内容高度
Chrome
document.documentElement.scrollHeight
浏览器所有内容高度,
document.body.scrollHeight
浏览器所有内容高度
document.documentElement.scrollTop
始终为
0
,
document.body.scrollTop
浏览器滚动部分高度
document.documentElement.clientHeight
浏览器可视部分高度,
document.body.clientHeight
浏览器所有内容高度
DTD
未声明
IE
document.documentElement.scrollHeight
浏览器可视部分高度,
document.body.scrollHeight
浏览器所有内容高度
document.documentElement.scrollTop
始终为
0
,
document.body.scrollTop
浏览器滚动部分高度
document.documentElement.clientHeight
始终为
0
,
document.body.clientHeight
浏览器可视部分高度
FF
document.documentElement.scrollHeight
浏览器可视部分高度
,
document.body.scrollHeight
浏览器所有内容高度
document.documentElement.scrollTop
始终为
0
,
document.body.scrollTop
浏览器滚动部分高度
document.documentElement.clientHeight
浏览器所有内容高度,
document.body.clientHeight
浏览器可视部分高度
Chrome
document.documentElement.scrollHeight
浏览器可视部分高
度
,document.body.scrollHeight
浏览器所有内容高度
document.documentElement.scrollTop
始终为
0
,
document.body.scrollTop
浏览器滚动部分高度
document.documentElement.clientHeight
浏览器所有内容高度,
document.body.clientHeight
浏览器可视部分高度
浏览器所有内容高度即浏览器整个框架的高度,
包括滚动条卷去部分
+
可视部分
+
底部隐藏部分的高度总和
浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高
度。
综上
1
、
document.documentElement.scrollTop
和
document.body.scrollTop
始终有
一个为
0
,所以可以用这两个的和来求
scrollTop
2
、
scrollHeight
、
clientHeight
在
DTD
已声明的情况下用
documentElement
,
未声明的情况下用
body
3
、
document.documentElement.scrollTop
在未声明的情况下始终为
0
,所以可
以用来判断是否声明了
DTD;
所以,
判断滚动条
是否已拉到页面最底部,可以用如下代码
window.onscroll = function (){
var marginBot = 0;
if (document.documentElement.scrollTop){
marginBot = document.documentElement.scrollHeight
–
(document.documentElement.scrollTop+document.body.scrollTop)-document
.documentElement.clientHeight;
} else {
marginBot = document.body.scrollHeight
–
document.body.scrollTop- document.body.clientHeight;
}
if(marginBot<=0) {
//do something
}
}
js获取不同浏览器盒子宽度高度的更多相关文章
- JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)_javascript技巧_--HTML5中文学习网 http://www.html5cn.com.cn/shili/javascripts/79 ...
- Js获取字符串的显示宽度/高度
重点:1.在H5页面,文字大小单位为rem2.不同的font-family,文字的宽度不一样3.文字宽度同时受font-size和font-family影响 思路:在页面动态创建一个节点,设置节点的f ...
- JS获取当前浏览器的类型
<script type=“text/javascript”> function isIE(){return navigator.appName.indexOf(“Microsoft In ...
- js 获取浏览器/网页宽度高度整理
网页宽度.高度: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: document.bo ...
- JS获取图片的原始宽度和高度
页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能首先想到的是元素的innerWidth属性,或者jQuery中的width()方法.如下: <img id="img" ...
- JS获取各种浏览器窗口大小的方法
常用:JS 获取浏览器窗口大小复制代码 代码如下:// 获取窗口宽度if (window.innerWidth)winWidth = window.innerWidth;else if ((docum ...
- jq 获取各个元素的宽度高度的方法
JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...
- js获取网页屏幕可视区域高度
document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.document ...
- js获取网页屏幕可见区域高度
document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...
随机推荐
- 《精通CSS》——个人总结
[属性选择器] 属性选择器可以根据某个属性是否存在或属性的值来寻找元素. 只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器.在 IE6 及更低的版本中,不支持属性选择. 事例: ...
- mpich2 下运行时出现“由于目标计算机积极拒绝,无法连接”的错误
进行mpi并行编程时候,win8下使用mpich2时候,安装目录下找到wmpiexec.exe程序打开,填入编写好的.exe程序地址并制定执行的任务数目的想要运行时候,出现错误: unable to ...
- jdbc连接数据库的步骤
1.加载JDBC驱动程序: 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机), 这通过java.lang.Class类的静态方法forName(String classN ...
- 一键批量ping任意ip段的存活主机
=======================by me===================================== @echo offecho.color FC for /f %%i ...
- HDU 1335 Basically Speaking(进制转换)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1335 Problem Description The Really Neato Calculator ...
- Java IO 转换流 字节转字符流
Java IO 转换流 字节转字符流 @author ixenos 字节流 输入字节流:---------| InputStream 所有输入字节流的基类. 抽象类.------------| Fil ...
- React 相关资料
learncodeacademy/react-js-tutorials MobX
- putty 中使用git
提交git pwd 查看当前目录 进入目录cd /home/gongfu/tripb/master 修改代码目录 git status 查看 修改的文件(新增的,删除的) git commit -m ...
- OpenCV2.x自学笔记——自适应阈值
adaptiveThreshold(src,dst, double maxValue, int adaptiveMethod, int thresholdType, int blockSize, do ...
- Debian上安装java
Debian 8 Jessie上安装命令: echo "deb http://ppa.launchpad.net/webupd8team/java/ubuntu trusty main&qu ...