JavaScript -获取屏窗与视窗、文档宽高
实例:1920*1080的电脑屏幕
1、获取窗口中的文档显示区域宽高
- clientw = window.innerWidth; //1920(包含滚动条)
- clienth = window.innerHeight; //883(不含工具条)
2、获取窗口(包括滚动条与工具条)区域宽高
- clientw = window.outerWidth; //1920(包含滚动条)
- clienth = window.outerHeight; //883(包含工具条)
1与2 的区别在于:是否包含工具条
- window.innerWidth == window.outerWidth //他们两是相等了,都包含的滚动条的宽度
- 唯一不同的在高度,如:
- 当我们未按下F12的时候,也就是当我们暂时没有工具条的时候
- clientw = window.innerHeight; //883(不含工具条)
- clienth = window.outerHeight; //883(含工具条)
当我们按下F12的时候,就会发现区别很明显了
- clientw = window.innerHeight; //627(不含工具条)
- clienth = window.outerHeight; //883(含工具条)
3、获取网页可见区域宽高
- clientw = document.body.clientWidth; //1903(不包含滚动条)
- clienth = document.body.clientHeight; //866(不包含工具条)
4、获取网页可见(含边线,但不是边距)区域宽高
- clientw = document.body.offsetWidth; //1903(不包含滚动条,含边线)
- clienth = document.body.offsetHeight; //866(不包含工具条,含边线)
3与4的区别在于:是否包含边线
我们发现上述两者获取的网页可见区域宽高是相等的,那是因为我们的body上没有设置border的时候,如下区别就很明显了:
- /*我们给body设置一个1像素的边框*/
- body { border: 1px solid #000000;}
- clientw = document.body.clientWidth; //1903(不含滚动条)
- clienth = document.body.clientHeight; //610(不含工具条)
- clientw1 = document.body.offsetWidth; //1905(不含滚动条,含边线)
- clienth2 = document.body.offsetHeight; //612(不含工具条,含边线)
- 最终显示为:
我们发现client...没有加上body的边线而offset...包含的边线,这就他们明显的区别
在这里还有一小细节,就是当你的内容高度超出了视窗,滚动条产生自带的滚动条时,你需要再次调用这个方法来获取的你的视窗。
方法解析步骤:
1、获取视窗可用区域的宽度:1920
2、判断是否超出视窗,超出加载滚动条
3、再次调用方法获取视窗可用区域宽度:1903(这里才是真正不包含滚动条的值)
为了避免获取到的值没有减掉滚动条
我们可以调用两次,比如这样:
- clientw = document.body.clientWidth;//
- clientw = document.body.clientWidth;//
5、网页正文全文宽高
- clientw = document.body.scrollWidth; //1903(不含滚动条)
- clienth = document.body.scrollHeight; //1269(不含工具条)
所谓正文全文,实际就是整个网页文档的宽高,既然是整个网页文档宽高肯定就是,网页内容有多宽那个宽就是多少,网页内容有多高那高就是多少了,当然同样包含着边线
- body {
- border: 1px solid #000000;
- }
- .content {/*比如这是文档的全部内容*/
- width: 2000px;
- height: 1500px;
- background-color: #808080;
- }
那么我们现在获取到的宽高就是:
我们发现他的边线只加了1px,也就是值加了一边,而没有全加上,而这个是在360中测试的结果,接着我在其他做了测试,测试结果如下:
360,谷歌,Edge,edge仿真ie8+:2001*1501
火狐,ie11:2000*1500
我发现他的结果并不稳定,因此使用他获取整个body文档的宽高当存在border的时候,并是最理想的,他用于获取某些文档节点的宽高相对就比较稳定了。
6、屏窗
所谓屏窗就是整个屏幕窗口,我们前面说的到都属于视窗,也就是可视区域的窗口
获取屏窗一般使用:
- clientw = window.screen.width; //
- clienth = window.screen.height; //
其获取到的是我们客户端整个屏幕的宽高
第二种是获取屏幕可用工作去宽高
- clientw = window.screen.availWidth; //
- clienth = window.screen.availHeight; //
即获取到的是显示浏览器的屏幕的可用宽高,这个可用高度不包括分配给半永久特性(如屏幕底部的任务栏)的垂直空间
注意这里的任务栏与工具栏不同,要注意区分,浏览器的工具栏指的是类似于F12这样的调控工具栏,而任务栏则指的是浏览器最底下的状态栏,是始终存在的,而工具栏是可以关闭的
工具栏可以关闭
任务栏始终存在
作者:leona
原文链接:http://www.cnblogs.com/leona-d/p/6347013.html
版权声明:本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接
JavaScript -获取屏窗与视窗、文档宽高的更多相关文章
- JS中级 - 03:文档宽高及窗口事件(选)
可视区尺寸 document.documentElement.clientWidth document.documentElement.clientHeight 滚动距离 document.body. ...
- BOM,文档宽高及窗口事件小析
(一)BOM:Browser Object Model(浏览器对象模型)页面上所有的变量都是window的属性 一.方法:1. open(,)打开一个新窗口(页面)一参为页面地址url,二参为打开方式 ...
- iOS开发——数据持久化Swift篇&文件目录路径获取(Home目录,文档目录,缓存目录等)
文件目录路径获取(Home目录,文档目录,缓存目录等) iOS应用程序只能在自己的目录下进行文件的操作,不可以访问其他的存储空间,此区域被称为沙盒.下面介绍常用的程序文件夹目录: 1,Home ...
- Swift - 常用文件目录路径获取(Home目录,文档目录,缓存目录等)
当前位置: 首页 > 编程社区 > Swift > Swift - 常用文件目录路径获取(Home目录,文档目录,缓存目录等) Swift - 常用文件目录路径获取(Home目录,文 ...
- 【转】IOS获取屏窗高度踩坑之window.outerHeight
近日本人在直接使用window.outerHeight获取屏窗高度时 在iphone 6中出现等于0的情况,从而导致页面发生错误 后找遍代码,测试无数,终于让我逮住了这个该死兼容 window.out ...
- js动态获取浏览器或页面等容器的宽高
首先说一下js动态获取浏览器或页面等容器的宽高的方法大体有哪些: 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHei ...
- javaScript高级教程(六) 获取窗口,屏幕,文档信息
1.屏幕坐标:相对于桌面左上角 窗口坐标:相对于窗口的左上角 文档坐标:相对于html文档左上角 当有滚动条时,窗口坐标与文档坐标之间有区别
- JavaScript学习笔记7 之DOM文档对象模型
一.什么是DOMDocument Object Model 文档 -------对象 ----模型-------缩写DOM DOM是针对HTML和XML文档的一个API(应用程序编程接口).DOM描绘 ...
- javascript之DOM(Document Object Model) 文档对象模型
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
随机推荐
- C# LDAP
Lightweight Directory Access Protocol OpenLDAP
- SQL Like中的逗号分隔符
SQL Like中的逗号分隔符 在与数据库交互的过程中,我们经常需要把一串ID组成的字符串当作参数传给存储过程获取数据.很多时候我们希望把这个字符串转成集合以方便用于in操作. 有两种方式可以方便 ...
- Memcached管理与监控
一个用PHP编写的可视化的MemCached管理系统 MemAdmin是一款可视化的Memcached管理与监控工具,使用PHP开发,体积小,操作简单. 主要功能: 服务器参数监控:STATS.SET ...
- POJ 1258:Agri-Net(最小生成树&&prim)
Agri-Net Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 38918 Accepted: 15751 Descri ...
- Atitit.antlr实现词法分析
Atitit.antlr实现词法分析 1.1. antlrworks-1.4.3.jar wizard1 1.2. 词法的类型 id,int,float ,comment,str,char,wh ...
- loongson官方PMON使用
目录 [隐藏] 1 PMON使用介绍 1.1 进入PMON控制界面 1.2 Pmon的图形界面 1.3 Pmon的基本命令 1.3.1 Boot and Load 启动与加载内核 1.3.2 MyC ...
- Eclipse Jetty Integration
http://eclipse-jetty.sourceforge.net/ Introduction Eclipse Jetty Integration provides a launch confi ...
- HTTP Basic auth认证
Basic 概述 Basic 认证是HTTP 中非常简单的认证方式,因为简单,所以不是很安全,不过仍然非常常用. 当一个客户端向一个需要认证的HTTP服务器进行数据请求时,如果之前没有认证过,HTTP ...
- C# 冒泡排序
class Program { static void swap( ref int atemp, ref int btemp)//注意ref的使用 { int temp = atemp; atemp ...
- 作为一个Linux/Unix程序员有哪些要求
C程序开发: 熟悉数据库sql语言: 熟练掌握C语言(面向过程的),掌握C++(面向对象的) 工程管理工具:make,会写Makefile 熟悉IBM DB2.Informix.Sysbase.SQL ...