码迷,mamicode.com
首页 > 其他好文 > 详细

浏览器可视区大小简说(clientWidth,innerWidth)

时间:2018-05-26 17:52:41      阅读:150      评论:0      收藏:0      [点我收藏+]

标签:lse   doc   浏览器   var   com   宽高   方式   lin   版本   

  网络上获取窗口文档显示区的宽高有以下三种方式:

  1:window.innerHeight/innerWidth

   第一种方式获取的是可视区的宽高,包括了滚动条的宽度

   ps:IE 8 及更早 IE版本不支持这两个属性。

  2:document.body.clientHeight/clientWidth

   第二种方式获取的是 body对象宽度

  3:document.documentElement.clientHeight/clientWidth

   第三种方式获取的是可视区的宽高,不包括了滚动条的宽度

  兼容写法如下
var width = window.innerWidth,
height = window.innerHeight; if (typeof width != number) { //如果类型不为number,表示该浏览器不支持innerWidth属性 if (document.compatMode == CSS1Compat) { //CSS1Compat:判断是否为标准兼容模式。 width = document.documentElement.clientWidth; height = document.docuementElement.clientHeight; } else { //不是标准模式,则有可能是IE6或及其以下版本(早期的浏览器对css进行解析时,并未遵守W3C标准) width = document.body.clientWidth; //网页可见区域宽 height = document.body.clientHeight; //网页可见区域高 } alert(width); alert(height);

 

   

浏览器可视区大小简说(clientWidth,innerWidth)

标签:lse   doc   浏览器   var   com   宽高   方式   lin   版本   

原文地址:https://www.cnblogs.com/xxcat/p/9093607.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!