如何在脚本中增加 Dom 元素的边距？答案

【问题标题】：How can I augment the margin of an element from the Dom in my script?如何在脚本中增加 Dom 元素的边距？
【发布时间】：2021-11-26 18:27:44
【问题描述】：

我正在尝试使用箭头在正文中移动按钮。放数字文字是错误的，我测试了它链接到HTML的代码。

document.body.addEventListener("keydown", function (evt) {
    
    const btn = document.querySelector('button');
    switch(evt.code) {
        
        case 'ArrowUp':
            btn.style.marginBottom =+ 10;
        break;

        case 'ArrowDown':
            btn.style.marginTop =+ 10;
        break;

        case 'ArrowRight':
            btn.style.marginLeft += 10;
        break;

        case 'ArrowLeft':
            btn.style.marginRight =+ 10;
        break;

        default:

    }
})

【问题讨论】：

IMO 将 DOM 作为状态存储是错误的（当您尝试 += 来自 DOM 的值时，实际上就是这种情况）。为什么不在代码中引入变量来跟踪预期的边距值，然后将它们写入 DOM？

标签： javascript dom switch-statement

【解决方案1】：

marginLeft 和其他返回一个字符串（带有“px”文本），所以你必须删除它才能求和。

document.body.addEventListener("keydown", function (evt) {
    
    const btn = document.querySelector('#mybutton');
 
    switch(evt.code) {
        
        case 'ArrowUp':
            btn.style.marginTop = (parseInt(btn.style.marginTop.replace("px","")) - 10) + "px";
        break;

        case 'ArrowDown':
        btn.style.marginTop = (parseInt(btn.style.marginTop.replace("px","")) + 10) + "px";
        break;

        case 'ArrowRight':
        btn.style.marginLeft = (parseInt(btn.style.marginLeft.replace("px","")) + 10) + "px";
        break;

        case 'ArrowLeft':
                btn.style.marginLeft = (parseInt(btn.style.marginLeft.replace("px","")) - 10) + "px";

        break;

        default:

    }
})

<div>before</div>
    <button id="mybutton" style="margin:1px">hello</button>
    <div>after</div>

【讨论】：