经常会遇到需要获取屏幕宽度、高度,可视区域宽度、高度等问题,也就常跟这几个打交道,一不小心,还真爱弄混淆了。

  先来列举下这几个吧:

  screen.availHeight、screen.availWidth;

  screen.height、screen.width;

  document.documentElement.clientWidth、document.documentElement.clientHeight;

  window.innerWidth、window.innerHeight。

  (1)、screen.availHeight与screen.availWidth。

  screen.availHeight:用来显示浏览器的屏幕的可用高度,即不包含window任务栏的高度(如下图所示)。

  screen.availWidth:用来显示浏览器的屏幕的可用宽度。

      

  

  (2)、screen.height与screen.width。

  screen.height:用来获取屏幕总高度,包括window任务栏的高度,即获取屏幕分辨率的高度。

  screen.width:用来获取屏幕总宽度,即获取屏幕分辨率的宽度。

  

  (3)、document.documentElement.clientWidth与document.documentElement.clientHeight

  document.documentElement.clientWidth:用来返回文档可视区域的宽度

  document.documentElement.clientHeight:用来返回文档可视区域的高度(不包含浏览器顶部的标签栏等)。如下图所示

    

  (4)、window.innerWidth与window.innerHeight。

  window.innerWidth:返回窗口的文档显示区的宽度(IE8及以下版本不支持)

  window.innerHeight:返回窗口的文档显示区的高度(IE8及以下版本不支持)

  (3)、(4)两种情况呢,其实作用是一样的

获取屏幕宽高度与可视区域宽高度(availWidth、clientWidth、width、innerWidth)的更多相关文章

  1. jQuery中获取文档的高度、可视区域高度以及滚动条距页面顶部的高度

    在写页面的时候,经常会碰到这样的情况,就是要获取文档的高度.可视区域高度或者滚动条距页面顶部的高度等情况. 但我总是有些爱搞混淆了,这里还是简单做个笔记吧,这里只限于使用jQuery来获取. 1.获取 ...

  2. js 获取页面可视区域宽高

    获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下. 1.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下 document.body.offsetWidth d ...

  3. #JS 获取屏幕分辨率、网页可见区域等

    window.screen document.body <script type="text/javascript"> function getInfo(){ var ...

  4. $(window).height(),在火狐下面获取的高度并不是可视区域的高度

    很简单,我发现是没有写<!DOCTYPE html>造成的,加上去就可以了

  5. js获取网页屏幕可视区域高度

    document.body.clientWidth ==> BODY对象宽度document.body.clientHeight ==> BODY对象高度document.document ...

  6. JS-特效 ~ 04. client对象、网页可视区域的宽高、client / offset / scroll 三大家族的区别、冒泡事件、事件委托、获取内嵌式和外链式属性getStyle(ele,attr) ;、缓动动画封装

    知识点: 模拟滚动条的解除事件问题 : event内置对象,包含 了大量事件: page兼容性: pageX || clientX + scool().top  : if (true === a)tr ...

  7. js获取可视区域高度

    document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.docume ...

  8. js获取屏幕以及元素宽高的方法

    一.window相关 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的高:window.screen.height 屏幕分辨率的宽:w ...

  9. JS获取浏览器可视区域的尺寸

    所谓可视区域是指能看得见的区域,即在浏览器中能看到页面的区域(高度与宽度).刚刚使用 document.body.clientHeight 来获取可视区域的高度得到的却是整个文档的高度,然后在cnbl ...

随机推荐

  1. Java集合(一) CopyOnWriteArrayList

    CopyOnWriteArrayList 类分析   1. CopyOnWriteArrayList 其中底层实现存放数据是一个Object数组:   private volatile transie ...

  2. JMeter数据库操作详解

    Jmeter提供了JDBC连接的插件,通过执行SQL语句的java API,实现对数据库的访问和查询,同时可以操作一次向数据库插入上百条上千条数据. 一.安装驱动包 将需要连接JDBC的jar包放入j ...

  3. Java订单功能模块设计与实现

    在商城项目中,之前我们介绍了购物车功能模块的实现,商品加入到购物车之后,就是到购物车结算,然后显示购物车的商品列表,点击去结算,然后到了未提交前的订单列表, 点击提交订单后,生成此订单,返回订单的订单 ...

  4. 《MYSQL》----字符串的复杂函数,检索的七-天-排-重

    接到了一个新的需求,拿到需求的时候瞬间有点头大,因为实在是有些棘手. 我们这个系统本身是个接口系统,总接口数大概在200个左右.外部会有很多用户在 不同的时间拿着不同参数去调我们的这些接口,用户的调集 ...

  5. 快速搭建vsftp 服务器并配置指定目录

    1  搭建vsftp 服务器 前期准备: 1.用root 进入系统 2.使用命令 rpm  -qa|grep vsftpd 查看系统是否安装了ftp,若安装了vsftp,使用这个命令会在屏幕上显示vs ...

  6. C# DataGridView 列的显示顺序

    this.dataGridView1.Columns["列名"].DisplayIndex=Convert.ToInt32("你要放置的位置")

  7. Ascall 码特殊字符——去除从windows上传文件的^M

    在windows上编辑过的文件如果传到unix上,在每个文件的末尾都会有一个换行控制符^M,这个字符一般处于隐藏状态,除非cat -A才能看到,如果不去掉这个符号,很多脚本不能正常运行,很多文件不能正 ...

  8. Extjs入门-grid

    function rowdblclickFn(grid, rowIndex, e){//双击事件              var row = grid.store.getById(grid.stor ...

  9. 初步了解 Django Models

    Part1:了解主键 1.      Python和Django版本如下: E:\django>python3 -V Python 3.5.2 E:\django>python3 -m d ...

  10. Nginx 反向代理获取真实IP问题

    一.前言 前文 Nginx 解决WebApi跨域二次请求以及Vue单页面问题 当中虽然解决了跨域问题带来的二次请求,但也产生了一个新的问题,就是如果需要获取用户IP的时候,获取的IP地址总是本机地址. ...