<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>