JavaScript - WebAPI - offset家族 - 案例 - 点击盒子向右移动

最新推荐文章于 2022-07-13 15:55:37 发布

Henry_ww

最新推荐文章于 2022-07-13 15:55:37 发布

阅读量238

点赞数

分类专栏：案例文章标签： javascript

本文链接：https://blog.csdn.net/Henry_ID/article/details/119616916

版权

案例专栏收录该内容

34 篇文章 4 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>offset家族 - 案例 - 点击盒子向右移动</title>
        <style>
            .box {
                position: absolute;
                left: 0;
                top: 0;
                width: 100px;
                height: 100px;
                background-color: rgb(235, 12, 49);
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
    <script>
        // 需求: 点击盒子,向右移动10px

        // 分析: 向右移动, 在原来的左偏移上增加10px, 600结束
        const box = document.querySelector(".box");
        box.onclick = function () {
            // 判定是否到600
            if (this.offsetLeft < 600) {
                // 只能修改行内样式
                box.style.left = this.offsetLeft + 10 + "px";
            }
        };

        // // 点击盒子,宽度在原来的基础上向右延伸 10px  到600结束
        // box.onclick = function () {
        //     // 判定是否到600
        //     if (this.offsetWidth < 600) {
        //         // 只能修改行内样式
        //         box.style.width = this.offsetWidth + 10 + "px";
        //         // box.style.width = this.offsetWidth + 10 + "px";
        //     }
        // };

        // 总结
        // offset家族: 只能获取,不能修改
        // 修改: 行内样式修改
    </script>
</html>

Henry_ww

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript - WebAPI - offset家族 - 案例 - 点击盒子向右移动

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt
复制链接

扫一扫