目录

代码

<!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>Document</title>
</head>
<style>
    #box {
        width: 100px;
        height: 100px;
        background-color: rgb(26, 115, 199);
        /* position: relative; */ /*这里必须要加个相对定位下面才可以移动方法111*/
    }
</style>

<body>
    <div>
        <div id="box"></div>
        <button onclick="get()" style="margin-top: 10px;">点击</button>
    </div>
</body>
<script>
    var n = 0;
    function get() {
        var box = document.getElementById('box');
        n += 100
        // box.style.left  = n + 'px' // 若想起作用,必须要给上面box加个相对定位,这样才可以移动方法111
        box.style.marginLeft  = n + 'px'// 方法222
    }
</script>

</html>

效果

在这里插入图片描述

最后

感觉文章好的话记得点个心心和关注和收藏，有错的地方麻烦指正一下，如果需要转载,请标明出处，多谢！！！

# 前端 # javascript # css
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

读懂华为开发者空间第一课，让云上开发如此简单

avatar 华为开发者空间
cover

数据库高安全—角色权限：角色创建角色管理

avatar 华为开发者空间
cover

“赛博土木工程师”的多面人生：以技术绘制蓝图，分享知识行走江湖

avatar 华为开发者空间