如若初见
0%

获取浏览器视口宽高以及元素宽高

发表于

适用所有浏览器

1
2
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var w = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于Internet Explorer9、Chrome、Firefox、Opera 以及 Safari：

1
2
window.innerHeight; // 浏览器窗口的内部高度
window.innerWidth; // 浏览器窗口的内部宽度

对于 ie 8、7、6、5：

1
2
3
4
5
document.documentElement.clientHeight
document.documentElement.clientWidth
//或者
document.body.clientHeight
document.body.clientWidth

获取页面总高度和宽度，以及scrollTop d的兼容处理；

1
2
3
4
5
6
7
8
9
10
11
// clientWidth 处理兼容性
function getClient() {
    return {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
    }
}
// scrollTop兼容性处理
function getScrollTop() {
    return window.pageYOffset || document.documentElement.scrollTop;
}

获取元素的宽高

1
2
3
4
5
// 对应的dom元素的宽高有以下几个常用的：
document.getElementById("div").offsetHeight; // 元素的实际高度
document.getElementById("div").offsetWidth;  // 元素的实际宽度
document.getElementById("div").offsetLeft;  // 元素的实际距离左边界的距离
document.getElementById("div").offsetTop // 元素的实际距离上边界的距离
------ 本文结束------