Bjb Code

BOM 属性

在 JS 中，当我们处理元素的位置和滚动时，需要了解的属性有 offset 属性、scroll 属性、client 属性。

OFFSET 属性

// 如果要获取 CSS 内部样式里定义的属性值，比如 top = 150px，直接用 document.getElementById("dv3").top 是获取不到的，document.getElementById("dv3").top 只能获取到行内属性的值。
// 这就要用到 offset 加上属性，如 offsetWidth、offsetHeight、offsetTop、offsetLeft
// 以后都用这种方式
document.getElementById("btn7").onclick = function(){
	console.log(document.getElementById("dv3").offsetWidth);	// 获取 dv3 的宽（包含元素的边框宽度）
	console.log(document.getElementById("dv3").offsetHeight);	// 获取 dv3 的高（包含元素的边框宽度）
	console.log(document.getElementById("dv3").offsetTop);		// 获取 dv3 定位时，相对于上一定位元素的的top
	console.log(document.getElementById("dv3").offsetLeft);		// 获取 dv3 定位的，相对于上一定位元素的left
}

SCROLL 属性

/* scroll属性 */
document.getElementById("btn8").onclick = function(){
	console.log(document.getElementById("dv4").scrollHeight);	// dv4 里的内容未超出 dv4 高度时，返回 dv4 的高度，超出时，返回整个内容的高度
	console.log(document.getElementById("dv4").scrollWidth);	// dv4 里的内容未超出 dv4 宽度时，返回 dv4 的宽度，超出时，返回整个内容的宽度
	console.log(document.getElementById("dv4").scrollTop);		// 获取 dv4 里的竖直滚动条，滚动后，当前能看到的内容，离 dv4 顶端的距离
	console.log(document.getElementById("dv4").scrollLeft);		// 获取 dv4 里的水平滚动条，滚动后，当前能看到的内容，离 dv4 左边的距离
}

// onscroll 事件（div 的滚动事件）
document.getElementById("dv5").onscroll = function(){
	console.log(this.scrollTop);	// 拖动竖直滚动条时，输出内容距离 dv5 顶端的距离
}

// 页面的滚动事件
window.onscroll = function(){
	console.log(document.documentElement.scrollTop);	//拖动页面竖直滚动条，输出内容距离页面顶端的距离
}
		
// 固定导航栏
window.onscroll = function(){
	if(document.documentElement.scrollTop >= document.getElementById("dv6").offsetHeight){
		// 页面滚动条下拉超过一定高度，就将 dv7 置顶
		document.getElementById("dv7").className = "menu top";	// 可同时给元素赋多个 className
		// 上面一步会遮挡 dv8 里面的内容，所以将 dv8 的 marginTop 设置成 dv7 的宽度
		document.getElementById("dv8").marginTop = document.getElementById("dv7").offsetHeight;
	}
	else{
		// 页面滚动条又回到原位，再将 dv7 还原到最初的位置
		document.getElementById("dv7").className = "menu";
		// 再还原 dv8 的 marginTop
		document.getElementById("dv8").marginTop = "0px";
	}
}
				
// 获取页面的 scrollTop 和 scrollLeft 的封装函数
function getScroll(){
	return {
		left : window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
		top : window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
	};
}

// 使用函数，浏览器的滚动事件
window.onscroll = function(){
	console.log(getScroll().top);
	console.log(getScroll().left);
}

CLIENT 属性

/* client 属性 */
document.getElementById("btn9").onclick = function(){
	console.log(document.getElementById("dv9").clientWidth);	// 获取 div 可视区域的宽（不受 margin、border 宽度的影响）
	console.log(document.getElementById("dv9").clientHeight);	// 获取 div 可视区域的高（不受 margin、border 宽度的影响）
	console.log(document.getElementById("dv9").clientLeft);		// 获取 div 的 border-left（不受 margin、border 宽度的影响）
	console.log(document.getElementById("dv9").clientTop);		// 获取 div 的 border-top（不受 margin、border 宽度的影响）
}