一、BOM基本操作
1、查看滚动条的滚动距离
window.pageXOffset/pageYOffset // IE8和IE8以下不兼容 document.body/documentElement.scrollLeft/scrollTop // 兼容性比较混乱，用时取两个值相加，因为不可能同时存在两个同时有值
封装兼容性方法，求滚动条滚动距离getScrollOffset()
var getScrollOffset = function() { 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 } } }
控制台测试滚动条距离显示结果：
2、查看视口尺寸
window.innerWidth/innerHeight IE8及IE8以下不兼容 document.documentElement.clientWidth/clientHeight 标准模式下任意浏览器都兼容
封装兼容性方法，返回浏览器视口尺寸 getViewOffset()
var getViewOffset = function() { if (window.innerWidth) { return { w: window.innerWidth, h: window.innerHeight } } else { if (document.compatMode === "CSS1Compat") { // 标准模式下 return { w: document.documentElement.clientWidth, h: document.documentElement.clientHeight, } } else { // 怪异模式下（头部不加<!DOCTYPE html>） return { w: document.body.clientWidth, h: document.body.clientHeight } } } }
控制台测试视口宽度显示结果：
注意：document身上有一个属性compatMode可以查看当前文档是何种模式（标准或怪异）
上面返回结果是标准模式，下面的返回结果是怪异模式
3、查看元素尺寸
查看元素几何尺寸
domEle.getBoundingClientRect(); // domEle(任意DOM元素) 兼容性很好【了解】
// 该方法返回一个对像，对象里面有left、top、right、bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表该元素右下角的X和Y坐标
来看一个例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<style type="text/css">
div {
width: 100px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
</script>
</body>
</html>
控制台调用该方法查看该元素的几何尺寸结果：
查看元素尺寸（视觉尺寸）
dom.offsetWidth();
dom.offsetHeight();