PC端网页特效 | 元素偏移量offset系列

目录

offset 概述

offset 与 style 区别

案例：获取鼠标在盒子内的坐标

案例：模态框拖拽

案例：仿京东放大镜

---

offset 概述

        offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。  

• 获得元素  距离带有定位父元素  的位置  
• 获得元素自身的大小（宽度高度）
• 注意： 返回的数值都不带单位

element.offsetTop 和 element.offsetLeft 返回的是元素距离 带有定位的父元素 之间的偏移

        返回的不带单位的数值

        // 1.可以得到元素的偏移 位置，返回的不带单位的数值
        console.log(father.offsetTop);  // 100
        console.log(father.offsetLeft); // 100
        // 它以带有定位的父亲为准，如果没有父亲或者父亲没有定位，则以body为准
        console.log(son.offsetLeft);

element.offsetWidth 和 element.offsetHeight 可以获得元素的大小，宽度和高度,是包含 padding + border + width的

        var w = document.querySelector('.w');
        // 2.可以获得元素的大小，宽度和高度,是包含 padding + border + width的
        console.log(w.offsetWidth);
        console.log(w.offsetHeight);

element.offsetParent  返回的是带有定位的父亲

        // 3.返回带有定位的父亲，否则返回的是body
        console.log(son.offsetParent);  // 带有定位的父亲
        console.log(son.parentNode);  // 返回的是 最近一级的父亲，不管父亲有没有定位

offset 与 style 区别

offest

• offset 可以得到任意样式表中的样式值
• offset 系列获得的数值是没有单位的
• offsetWidth 包含padding+border+width offsetWidth 等
• offsetWidth 属性是只读属性，只能获取不能赋值
• 所以，我们想要获取元素大小位置，用offset更合适

style

• style 只能得到行内样式表中的样式值
• style.width 获得的是带有单位的字符串
• style.width 获得不包含padding和border 的值
• style.width 是可读写属性，可以获取也可以赋值
• 所以，我们想要给元素更改值，则需要用style改变

    <script>
        var box = document.querySelector('.box');
        console.log(box.offsetWidth);  // 获取元素大小位置
        console.log(box.style.width);
        box.style.width = '300px';