前端-JS进阶-offset/client/scroll

获取元素属性值

1. offset（元素偏移量）

offset可以动态的得到该元素的位置（偏移）/大小等

1. 获得元素距离带有定位父元素的位置
2. 获得元素自身的大小（宽高）
3. 返回的数值都不带有单位

offset系列属性	作用
element.offsetParent	返回该元素带有定位的父级元素，如果父级没有定位则返回body
element.offsetTop	返回元素相对带有定位父级元素上方的偏移量，不带单位（父级无定位，则针对body计算）
element.offsetLeft	返回元素相对带有定位父级元素左边框的偏移量，不带单位（父级无定位，则针对body计算）
element.offsetWidth	返回自身（包括padding/边框/内容区）宽度，返回值不带单位
element.offsetHeight	返回自身（包括padding/边框/内容区）高度，返回值不带单位

⚠️ offset与style的区别

offset	style
offset可以获取任意样式表中的样式值	style只能获取行内样式表中的样式值
offset获得的数值没有单位	style.width获得的是带有单位的字符串
offsetWidth包含padding+border+width	style.width获得不包含padding与border的值
offsetWidth等属性是只读属性，只能获取不能赋值	style.width是可读写属性，可以获取也能赋值
获取元素大小位置，offset更适合	给元素更改值，需要用style更改

❤️案例：获得鼠标点击盒子后，鼠标在盒子内的X，Y轴
var div = document.querySelector('div');
div.addEventListener('click',function(e){
   
    var x = e.pageX; // 获取鼠标位置页面的X轴
    var y = e.pageY; // 获取鼠标位置页面的Y轴
    var divX = x - div.offsetLeft; // 获取盒子位于页面的x轴位置，用鼠标-盒子则得到鼠标在盒子内的X位置
    var divY = y - div.offsetTop; // 获取盒子位于页面的y轴位置，用鼠标-盒子则得到鼠标在盒子内的Y位置
    console.log(divX);
    console.log(divY);
})

❤️案例：鼠标按下拖拽内容
// 鼠标按下拖拽盒子
box.addEventListener('mousedown',function(e){
    // 鼠标按下触发事件
    box.style.cursor = 'move';  // 光标变成十字形
    var x = e.pageX - box.offsetLeft; // 计算光标在盒子内的X轴
    var y = e.pageY - box.offsetTop; // 计算光标在盒子内的Y轴
    document.addEventListener('mousemove',move); // 鼠标按下后移动触发事件，实行按下拖拽，必须在鼠标按下事件内书写（页面内都能拖拽，所以使用document）
    function move(e){
   
        box.style.top = e.pageY - y + 'px'; // 计算盒子的Y轴
        box.style.left = e.pageX - x + 'px'; // 计算盒子的X轴
    }
    document.addEventListener('mouseup',function(){
    // 鼠标弹起触发事件：不在推拽盒子，必须在鼠标按下事件内书写（页面内都能停止拖拽&#x