BOM 页面尺寸位置等知识点

<script>
		
		var d1 = document.getElementById("d1");
		
		// 1.style属性里面存储的属性值必须是行内的，在内联和外联样式规则里面的这些尺寸是不能被读取的，所以千万不要靠这些值来当做页面上给元素位置尺寸的依据
		console.log([d1.style.width, d1.style.height, d1.style.borderWidth]);

		// 2.client
		// 不包括边框的可视区域
		console.log([d1.clientWidth, d1.clientHeight]);
		// 可视区域距离边框外侧的偏移量，实际上就是border的宽度
		console.log([d1.clientLeft, d1.clientTop]);
		
		// 3.offset
		// 包括边框的可视区域大小
		console.log([d1.offsetWidth, d1.offsetHeight]);
		// 边框外侧距离参照物的距离（偏移量）
		console.log([d1.offsetLeft, d1.offsetTop]);

		// 4.style.top 同style 的width和height一样，样式里面的top和left也不能直接获取到元素的位置，如果需要获取还是要靠offsetLeft和Top
		console.log([d1.style.left, d1.style.top]);

		// 5.clientX/Y screenX/Y offsetX/Y movementX/Y
		d1.addEventListener("click", function(){
			// 鼠标位置距离浏览器窗口的 偏移量
			console.log("click:"+[event.clientX, event.clientY]);
			// 鼠标位置距离屏幕的 偏移量
			console.log("click:"+[event.screenX, event.screenY]);
			// 鼠标位置在元素本身坐标系的 位置
			console.log("click:"+[event.offsetX, event.offsetY]);
			console.log("click:"+[event.movementX, event.movementY]);
		});

		var now = 0;

		// 如何使用move事件来监控用户的 暴力抖动
		d1.addEventListener("mousemove", function(){

			// 通过时间戳来控制 move 事件处理的频率
			// if (now != 0) {
			// 	if ((event.timeStamp - now) >= 200) {
			// 		console.log("mousemove:"+[event.movementX, event.movementY]);
			// 	}
			// }

			// 通过移动速度来控制
			// event.movementX是每次位移的 长度，除以 时间差 就是光标移动的速度
			d1.innerHTML = event.movementX/(event.timeStamp - now) + "\n" + event.movementY/(event.timeStamp - now);
			if (Math.abs(event.movementX/(event.timeStamp - now)) < 0.00001) {
				// console.log("mousemove:"+[event.movementX, event.movementY]);
			}

			now = event.timeStamp;

		});





	</script>

<script>
		
		var d1 = document.getElementById("d1");
		var d0 = document.getElementById("d0");		


		// 如果一个元素内部的子元素大小超出了它的范围，可以使用 overflow ，hidden表示超出部分隐藏
		// scroll表示超出的部分需要滚来显示
		// 当父元素内容滚动时，它的scorllwidth/height等于内容滚动的最大值
		console.log([d0.scrollWidth, d0.scrollHeight]);//父元素内部被撑开的大小
		console.log([d0.clientWidth, d0.clientHeight]);//父元素可视窗口的大小


		d0.addEventListener("scroll", function(){
			console.log([d0.scrollTop, d0.scrollLeft]);//是个动态的，是指父元素中的子元素上或左移动（移出去）的大小，在在浏览器中好像用window.scrollX,scrollY表示。
		})
		






	</script>