适用所有浏览器
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:
window.innerHeight; // 浏览器窗口的内部高度
window.innerWidth; // 浏览器窗口的内部宽度
对于 ie 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
//或者
document.body.clientHeight
document.body.clientWidth
获取页面总高度和宽度,以及scrollTop d的兼容处理;
// 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;
}
获取元素的宽高
// 对应的dom元素的宽高有以下几个常用的:
document.getElementById("div").offsetHeight; // 元素的实际高度
document.getElementById("div").offsetWidth; // 元素的实际宽度
document.getElementById("div").offsetLeft; // 元素的实际距离左边界的距离
document.getElementById("div").offsetTop // 元素的实际距离上边界的距离