pc端网页特效的offset和client相关属性

最新推荐文章于 2024-06-07 23:26:45 发布

热身就犯困

最新推荐文章于 2024-06-07 23:26:45 发布

阅读量53

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/m0_73805336/article/details/131155500

版权

1.pc端网页特效

1.1offset 元素偏移量

offset相关系列属性可以动态的得到元素的位置（偏移）、大小等

（1）获取元素距离带有定位父元素的位置

（2）获取元素自身的大小（宽度高度）

（3）注意：返回的数值都不带单位

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z5g3dxID-1686475368807)(C:\Users\HCKB\Pictures\Camera Roll\微信图片_20230606194914.jpg)]

   <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            width: 200px;
            height: 200px;
            background-color: blue;
            margin: 150px;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: crimson;
            margin-left: 45px;
        }
        .w {
            width: 200px;
            height: 200px;
            background-color: aqua;
            margin: 0 auto 200px;
            padding: 20px;
            border: 15px red solid;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="w"></div>
    <script>
        // offset系列
        var father = document.querySelector('.father');
        var son = document.querySelector('.son');
        // 1.可以得到元素的偏移 位置 返回的不带单位的数值
        console.log(father.offsetTop);
        console.log(father.offsetLeft);
        // 它以带有定位的父亲为准 如果没有父亲或父亲没有定位  则以body为准
        console.log(son.offsetLeft);

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

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

offset和style的区别

offset：

可以得到任意样式表中的样式值

获得的数值没有单位

offsetWidth包含padding+border+width

获取的都是只读属性，只能获取不能赋值

获取元素大小位置，用offset

style：

只能得到行内样式表中的样式值

获得的是带有单位的字符串

style.width不包含padding和border

获取的是可读写属性，可以获取也可以赋值

想要给元素改值，用style

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

    <style>
       .box {
        width: 200px;
        height: 200px;
        background-color: rgb(68, 70, 207);
        margin: 200px auto 200px;
       }

    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        // 我们在盒子内点击，想要得到鼠标距离盒子左右的位置
        // 首先得到鼠标在页面的坐标（e.pageX,e.pageY）
        // 其次得到盒子在页面中的距离（box.offsetLeft,box.offsetTop）
        // 用鼠标距离页面的坐标减去盒子在页面中的距离，得到鼠标在盒子内的坐标
        var box = document.querySelector('.box');
        box.addEventListener('mousemove',function(e) {
            // console.log(e.pageX);
            // console.log(e.pageY);
            // console.log(box.offsetWidth);
            // console.log(box.offsetTop);
            var x = e.pageX - this.offsetWidth;
            var y = e.pageY - this.offsetTop;
            // console.log(x);
            // console.log(y);
            this.innerHTML = 'x:' + x + 'y:' + y;
        })
    </script>
</body>

拖拽模态框

    <style>
        .box {
            position: fixed;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <script>
        var box = document.querySelector('.box');
        // 当鼠标按下就获得鼠标在盒子内的坐标
        box.addEventListener('mousedown', function(e) {
            var x = e.pageX - box.offsetLeft;
            var y = e.pageY - box.offsetTop;
            console.log(x);
            // 移动事件一定要写到按下事件中
            // 鼠标移动的时候，把鼠标在页面中的坐标， 减去鼠标在盒子内的坐标就是模态框的left和top值
                document.addEventListener('mousemove', move)
                function move(e) {
                box.style.left = e.pageX - x  + 'px';
                box.style.top = e.pageY - y + 'px';
            }
            // 鼠标弹起就让鼠标移动事件移除
                document.addEventListener('mouseup',function(e) {
                    document.removeEventListener('mousemove', move)
                })
        })
        
    </script>
</body>

1.2client 元素可视区

通过client相关属性可以动态得到该元素的边框大小、元素大小等

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G5QfJJY3-1686475368808)(C:\Users\HCKB\Pictures\Camera Roll\微信图片_20230608212103.jpg)]

立即执行函数

    <script>
        // 立即执行函数  不需要调用，自己马上能够执行的函数
        function fn() {
            console.log(1);
        }
        fn();
        // 写法  也可以传递参数进去
        (function() {})();    或者  (function(){}());

        (function(a) {
            console.log(1);
        })(1)  // 第二个小括号可以看作是调用函数  里面为传递的参数
    </script>

;
// 写法也可以传递参数进去
(function() {})(); 或者 (function(){}());

    (function(a) {
        console.log(1);
    })(1)  // 第二个小括号可以看作是调用函数  里面为传递的参数
</script>

热身就犯困

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
pc端网页特效的offset和client相关属性

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z5g3dxID-1686475368807)(C:\Users\HCKB\Pictures\Camera Roll\微信图片_20230606194914.jpg)]offset相关系列属性可以动态的得到元素的位置（偏移）、大小等。通过client相关属性可以动态得到该元素的边框大小、元素大小等。（1）获取元素距离带有定位父元素的位置。获取的是可读写属性，可以获取也可以赋值。（2）获取元素自身的大小（宽度高度）
复制链接

扫一扫