为何JavaScript修改HTML div颜色生效但位置属性不生效？

核心原因有两个： #

• 定位属性不支持：div元素默认的position是static，而top、left这类偏移属性仅对非static定位的元素生效（比如relative、absolute、fixed、sticky）。static定位的元素会直接忽略这些偏移设置。
• 缺少长度单位：就算定位方式正确，你写的100没有单位，浏览器无法识别这个值，必须加上px这类合法的CSS长度单位。

修复后的代码示例 #

你可以直接修改JS部分，补上定位设置和单位：

<!DOCTYPE html>
<html>

<body>
  <div id="id1">My Heading 1</div>

  <button type="button" onclick="changecolor()">Click Me!</button>

  <script>
    function changecolor() {
      var domElement = document.getElementById('id1');
      domElement.style.position = 'relative'; // 设置非static定位
      domElement.style.top = '100px'; // 加上单位px
      domElement.style.color = 'red';
    }
  </script>
</body>

</html>

如果希望提前设置定位（避免每次点击都重复设置），也可以在HTML里加CSS样式：

<!DOCTYPE html>
<html>
<head>
  <style>
    #id1 {
      position: relative; /* 提前设置定位方式 */
    }
  </style>
</head>
<body>
  <div id="id1">My Heading 1</div>

  <button type="button" onclick="changecolor()">Click Me!</button>

  <script>
    function changecolor() {
      var domElement = document.getElementById('id1');
      domElement.style.top = '100px'; // 直接设置带单位的top值
      domElement.style.color = 'red';
    }
  </script>
</body>

</html>

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