JavaScript中动态创建元素通过类名获取后无法设置定位样式的问题求助

嘿，我一眼就瞅出问题啦！你设置的top和left没生效，核心原因是：你动态创建的<div>默认是静态定位（position: static），而top、left这类偏移属性，只对relative、absolute、fixed这类非静态定位的元素生效，对static元素完全不起作用～

你只需要给这个元素添加一个非静态的定位属性就行，两种方式任你选：

方式1：创建元素时直接指定定位 #

在添加元素到页面之前，就给它加上定位样式：

let dynel = document.createElement('div');
dynel.className = 'foo';
dynel.style.width = '5px';
dynel.style.height = '5px';
dynel.style.backgroundColor = 'blue';
// 关键：添加非静态定位，这里用relative举例，也可以选absolute/fixed
dynel.style.position = 'relative';
document.body.appendChild(dynel);

之后再执行你的定位代码，蓝色方块就会乖乖跑到你指定的位置啦：

var foo = document.getElementsByClassName('foo');
foo[0].style.top = '50px';
foo[0].style.left = '200px';

方式2：获取元素后再补设定位 #

如果不想改动创建元素的代码，也可以在设置偏移前先给元素加上定位：

var foo = document.getElementsByClassName('foo');
// 先给元素加上定位属性
foo[0].style.position = 'relative';
// 再设置偏移
foo[0].style.top = '50px';
foo[0].style.left = '200px';

• relative：元素相对于自身原本的位置偏移，不会脱离文档流；
• absolute：元素会相对于最近的非static父元素定位，如果没有这类父元素，就相对于整个文档；
• fixed：元素固定在浏览器视窗的某个位置，滚动页面时位置不会改变。
  你可以根据自己的需求选择合适的定位类型～

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