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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

昔人'

你的鼓励将是我创造的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值