JS如何获取页面可见区域高度
window.document.body.clientHeight就可以
window.screen.availWidth 返回当前屏幕宽度(空白空间)
window.screen.availHeight 返回当前屏幕高度(空白空间)
window.screen.width 返回当前屏幕宽度(分辨率值)
window.screen.height 返回当前屏幕高度(分辨率值)
window.document.body.offsetHeight; 返回当前网页高度
window.document.body.offsetWidth; 返回当前网页宽度
我们这里说说四种浏览器对 document.body 的 clientHeight、offsetHeight 和 scrollHeight 的解释。
这四种浏览器分别为IE(Internet Explorer)、NS(Netscape)、Opera、FF(FireFox)。
clientHeight
大家对 clientHeight 都没有什么异议,都认为是内容可视区域的高度,也就是说页面浏览器中可以看到内容的这个区域的高度,一般是最后一个工具条以下到状态栏以上的这个区域,与页面内容无关。
offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度,可以小于 clientHeight。
scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度,可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度,不过最小值是 clientHeight。
简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、
FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度,只不过当网页内容高度小于等于 clientHeight
时,scrollHeight 的值是 clientHeight,而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。
同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同,只是把高度换成宽度即可
JS如何获取页面可见区域高度的更多相关文章
- js里获取页面高度和文档高度
$(window).height() 和 $(document).height()的区别 $(window).height()代表了当前可见区域的大小,$(document).height()则代表了 ...
- js 获取页面可视区域宽高
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下. 1.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下 document.body.offsetWidth d ...
- 使用js获取页面的各种高度
使用js获取相关高度: 获取网页被滚动条卷去的高度——兼容写法: scrollHeight = documen.body.scrollTop || document.documentElement.s ...
- js获取页面的各种高度与宽度
document.body.scrollTop等属性可以获取页面滚动距离等,但是此类属性在xhtml标准网页或者更简单的说是带<!DOCTYPE ..>标签的页面里得到的结果是0, 所以一 ...
- js中获取浏览器和屏幕高度
Javascript: IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高 ...
- JS/JQ获取各种屏幕的高度和宽度
Javascript: 网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.b ...
- JS - 获取页面滚动的高度
document.documentElement.scrollTop||document.body.scrollTop
- js中获取页面元素节点的几种方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 在js中获取页面元素的属性值时,弱类型导致的诡异事件踩坑记录,
前几天写一个js的时候遇到一个非常诡异的事情,这个问题是这样的,我要获取一个页面的DOM元素的val值,判断这个值是否比某个变量大,这个需求原先数字最大也就是10,现在要改了,可能会更多,这个时候我发 ...
随机推荐
- HDU 3743 Frosh Week(归并排序求逆序数)
归并排序求逆序数 #include <iostream> #include <cstdio> using namespace std; #define maxn 1000005 ...
- HDU - 2680 最短路 spfa 模板
题目链接http://acm.hdu.edu.cn/showproblem.php?pid=2680 题目大意,就是一个人可以从多个起点开始出发,看到终点的最短路是多少..只有可以运用和hdu2066 ...
- PAT1011
With the 2010 FIFA World Cup running, 随着2010世界杯的举行 football fans the world over were becoming increa ...
- Intellij idea生成Hibernate实体类
反向生成基于注解的Hibernate实体类 1. 为项目添加Hibernate支持 2. 在IDE右边找到database,然后按照步骤添加数据. 3. 保存后.在主面板左侧有persistence, ...
- learn from 德国老师
最近在跟踪德国来的一个老师学android,感触比较深的一点就是他对细节的理解,一个源代码他可以从第一行解释到最后一行,知道每一行的意思和用法,这可能就是德国人对细节的追求. 刚才想了一下写代码确实应 ...
- Android学习笔记之Broadcast Receiver
可程序间通信 注册通信,注销通信,发送消息 package com.jiahemeikang.helloandroid; import com.jiahemikang.service.EchoServ ...
- [算法] dijkstra单源无负权最小路径算法
#include <stdio.h>#include <stdlib.h>#include <string.h> #define INF 1000000#defin ...
- Bootstrap-dialog的使用(续Bootstrap Table)
Bootstrap-dialog实现表格内容的增,删,改. 插件引入:必须先引入jquery和bootstrap和artTemplate. <link rel="stylesheet& ...
- (中等) POJ 3660 Cow Contest,Floyd。
Description N (1 ≤ N ≤ 100) cows, conveniently numbered 1..N, are participating in a programming con ...
- (中等) HDU 3335 , DLX+重复覆盖。
Description As we know,the fzu AekdyCoin is famous of math,especially in the field of number theory. ...