前端原生js点击按钮向右移动div

最新推荐文章于 2024-04-28 13:46:58 发布

MFG_666

最新推荐文章于 2024-04-28 13:46:58 发布

阅读量1.7k

点赞数 2

分类专栏：原生HTML学习文章标签：前端 javascript css 前端js点击按钮向右移动

本文链接：https://blog.csdn.net/m0_49714202/article/details/126427327

版权

原生HTML学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

代码

<!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>