JavaScript动态创建的按钮使用style.left设置位置不生效如何解决？

问题原因 #

left/right/top/bottom这类位置偏移属性，仅对非static定位模式的元素生效，HTML元素默认的定位模式是static，所以你直接设置style.left不会生效。 #

解决方法 #

根据你的布局需求选对应的方案即可：

方案1：相对于页面自由调整位置

给按钮设置非static的定位模式，常用的有两种：

• position: absolute：相对于最近的非static定位的父元素偏移，如果没有符合条件的父元素就相对于整个页面偏移
• position: fixed：相对于浏览器窗口固定位置，页面滚动也不会动
  修改后的代码如下：

function createButtons(dialogueString, buttonIdString) {
    var btn = document.createElement("button");
    // 加这一行指定定位模式即可
    btn.style.position = "absolute";
    btn.style.left = "50%";
    // 要是想完全水平居中可以再加一行抵消按钮自身宽度的一半
    btn.style.transform = "translateX(-50%)";
    btn.id = buttonIdString;
    btn.innerHTML = dialogueString;
    document.body.appendChild(btn);
};
createButtons("Hello", "choice1");

方案2：仅水平居中，不需要自由定位

如果你的需求只是让按钮水平居中，不需要调整垂直位置或者自定义偏移，不需要改定位，直接设置块级展示+自动左右边距即可：

btn.style.display = "block";
btn.style.margin = "0 auto";

内容的提问来源于stack exchange，提问作者Arian