logo头像

求知若渴,虚心若愚

JavaScript和jQuery中各种宽高获取的API

JavaScript和jQuery中各种宽高获取的API

我们在进行web开发的时候,有时候会用到一些获取宽高的问题,但是由于总所周知的浏览器兼容问题,有时候我们的代码去获取浏览器或者window的宽高是获取不到的,今天小峰哥特意整理了一份兼容浏览器的API代码,给大家分享一下。

1. IE

1
2
3
4
5
6
7
document.body.clientWidth ==> BODY对象宽度

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

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

2. FireFox

1
2
3
4
5
6
7
document.body.clientWidth ==> BODY对象宽度

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

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

3. Opera

1
2
3
4
5
6
7
document.body.clientWidth ==> 可见区域宽度

document.body.clientHeight ==> 可见区域高度

document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)

document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

alert(document.body.clientWidth); //网页可见区域宽(body)

alert(document.body.clientHeight); //网页可见区域高(body)

alert(document.body.offsetWidth); //网页可见区域宽(body),包括border、margin等

alert(document.body.offsetHeight); //网页可见区域宽(body),包括border、margin等

alert(document.body.scrollWidth); //网页正文全文宽,包括有滚动条时的未见区域

alert(document.body.scrollHeight); //网页正文全文高,包括有滚动条时的未见区域

alert(document.body.scrollTop); //网页被卷去的Top(滚动条)

alert(document.body.scrollLeft); //网页被卷去的Left(滚动条)

alert(window.screenTop); //浏览器距离Top

alert(window.screenLeft); //浏览器距离Left

alert(window.screen.height); //屏幕分辨率的高

alert(window.screen.width); //屏幕分辨率的宽

alert(window.screen.availHeight); //屏幕可用工作区的高

alert(window.screen.availWidth); //屏幕可用工作区的宽

4. JQuery中各种宽高获取宽高

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$(window).height()) //浏览器当前窗口可视区域高度

$(document).height() //浏览器当前窗口文档的高度

$(document.body).height(); //浏览器当前窗口文档body的高度

$(document.body).outerHeight(true); //浏览器当前窗口文档body的总高度 包括border padding margin

$(window).width(); //浏览器当前窗口可视区域宽度

$(document).width(); //浏览器当前窗口文档对象宽度

$(document.body).width(); //浏览器当前窗口文档body的宽度

$(document.body).outerWidth(true); //浏览器当前窗口文档body的总宽度 包括border padding margin

5. offset():

  • 方法返回或设置匹配元素相对于文档的偏移(位置)。
  • 返回第一个匹配元素的偏移坐标。
  • 该方法返回的对象包含两个整型属性:top 和 left,以像素计。此方法只对可见元素有效
1
$('div').offset().left;

6. position():

  • 方法返回匹配元素相对于定位父元素的位置(偏移)。
  • 该方法返回的对象包含两个整型属性:top 和 left,以像素计。
  • 此方法只对可见元素有效。
1
$('div').position().left;
支付宝打赏 微信打赏

赞赏是对我们的肯定!