浏览器、文档、滚动的宽高

BOM:浏览器对象模型

主要是为了解决窗口和窗口之间的通信（交互）

window:BOM中的核心对象，创建的对象，变量都会自动成为window子对象，甚至于document也是window的子对象

1:获取浏览器的宽和高（可视区域）（不包括工具栏和滚动条）

ie9以下不兼容

window.innerWidth

window.innerHeight;

标准模式下，任意浏览器都兼容
document.body.clientWidth,
document.body.clientHeight
适用于怪异模式下的浏览器没有<!doctype html>
document.documentElement.clientWidth
document.documentElement.clientHeight

<!doctype html>

浏览器两种渲染模式怪异模式/混杂模式

// 可视区窗口宽高   （封装函数getViewportOffset）
function getViewportOffset(){
	if(window.innerWidth){
		return {
			x:window.innerWidth,
			h:window.innerHeight
		}
	}else {
		if(document.compatMode=="BackCompat"){
			//document.compatMode=="BackCompat" //向后兼容
			return {
				w:document.body.clientWidth,
				h:document.body.clientHeight
			}
		}else {
			return {
				w:document.documentElement.clientWidth,
				h:document.documentElement.clientHeight
			}
		}
	}
}

查看滚动条 ie9以下不支持
window.pageYOffset
window.pageXOffset
*************以下浏览器不兼容，用时取两个属性值相加，因为不可能存在两个同时有值
document.body.scrollTop
document.body.scrollLeft

document.documentElement.scrollTop
document.documentElement.scrollLeft

 // 查看滚动条(封装getScrollOffset()函数)
 function getScrollOffset() {
 	if(window.pageXOffset){
 		return {
 			x:window.pageXOffset,
 			y:window.pageYOffset
 		}
 	}else{
 		return {  //浏览器不兼容，用时取两个属性值相加 ，因为不可能存在两个同时有值
 			x:document.body.scrollLeft+document.documentElement.scrollLeft,
 			y:document.body.scrollTop+document.documentElement.scrollTop
 		}
 	}
 }

//文档的高度宽度
document.body.scrollWidth
document.body.scrollHeight

document.documentElement.scrollWidth
document.documentElement.scrollHeight

//文档的高度  宽度  (封装getScrollHeight()函数)
function getScrollHeight(){
	　　if(document.body.scrollWidth){
		return {
			w:document.body.scrollWidth,
			h:document.body.scrollHeight
		}
	}else {
		return {
			w: document.documentElement.scrollWidth,
			h: document.documentElement.scrollHeight
		}
	}
}

//封装insertAfter  功能类似insertBefore
    Element.prototype.insertAfter = function (targetNode, afterNode) {
        var beforeNode = afterNode.nextElementSibling;
        if (beforeNode == null) {
            this.appendChild(targetNode);
        } else {
            this.insertBefore(targetNode, beforeNode);
        }
    }

浏览器、文档、滚动的宽高

猜你喜欢