获取屏幕宽高度与可视区域宽高度(availWidth、clientWidth、width、innerWidth)

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

  先来列举下这几个吧:

  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)两种情况呢,其实作用是一样的

时间: 2024-10-11 10:26:36

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

JS元素宽高、可视区域宽高、滚动区域宽高和已滚动的高度

1.文档的高,屏幕的文档区域的高 document.body.clientHeight 2.有效的高,屏幕可视的高 document.documentElement.clientHeight 3.屏幕的总高度 document.documentElement.scrollHeight 4.滚动的高度 document.documentElement.scrollTop js代码 <script>// 获取有效的宽和高,屏幕可视的宽 高 var winX = document.documentE

js 获取页面可视区域宽高

获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下. 1.IE中,浏览器显示窗口大小只能以下获取: 代码如下复制代码 代码如下 document.body.offsetWidth document.body.offsetHeight 2.在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: document.documentElement.clientWidth document.documentElement.clientHeight 3.IE,FF,Saf

取不同浏览器可视区域宽高方法

function getViewportOffset(){ if(window.innerWidth){ return { w:window.innerWidth, t:window.innerHeight } }else if(document.compatMode == "BackCompat"){ return { w:document.body.clientWidth, t:document.body.clientHeight } }else{ return { w:docum

获取浏览器可视区域、屏幕的宽和高

document.documentElement.clientWidth:取得浏览器页面可视区域的宽度 document.documentElement.clientHeight:取得浏览器页面可视区域的高度 screen.width:取得屏幕宽度 screen.height:取得屏幕高度 screen.availWidth:取得除任务栏外的屏幕宽度 screen.availHeight取得除任务栏外的屏幕高度

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

一.window相关 网页正文部分上:window.screenTop 网页正文部分左:window.screenLeft 屏幕分辨率的高:window.screen.height 屏幕分辨率的宽:window.screen.width 屏幕可用工作区高度:window.screen.availHeight 屏幕可用工作区宽度:window.screen.availWidth 二.body相关 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.

js获取屏幕宽高等操作

document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHei

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

所谓可视区域是指能看得见的区域,即在浏览器中能看到页面的区域(高度与宽度).刚刚使用 document.body.clientHeight 来获取可视区域的高度得到的却是整个文档的高度,然后在cnblogs.com的一篇文章中获知需要通过 document.documentElement.clientHeight 才能获取到浏览器的可视区域的高度,顺便将该文章摘下来,如下: 在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取: 1 2 document.body.offsetWid

javascript判断某种元素是否进入可视区域

判断是否在指定的可视区域内,先用最简单的方式,比如整个页面为可视区域 找到几个关键因素: sTop= $(window).scrollTop();  //滚动条距顶部的高度 clientHeight= document.documentElement.clientHeight; //可视区域的高度 pos =  = $("#pointinfo_" + markers[i].id).offset().top;    //指定的元素上方距顶部的高度 pos1  = $("#poi

C# 获取屏幕的大小 SystemInformation类

C# 获取屏幕的大小 WinForm: int iActulaWidth = Screen.PrimaryScreen.Bounds.Width; int iActulaHeight = Screen.PrimaryScreen.Bounds.Height ; WPF下的: double dWidth = System.Windows.SystemParameters.PrimaryScreenWidth; double dHeight = System.Windows.SystemParame