如何使用JavaScript为指定DOM元素添加内联样式

你的代码存在两个核心问题，以下是修正方案：

错误点说明 #

1. 方法名拼写错误：不存在getElementByClassName，正确写法是**getElementsByClassName**（注意末尾的Elements复数形式）
2. 返回值处理错误：getElementsByClassName返回的是类数组的HTMLCollection，不能直接调用.style，必须获取集合中的具体元素项

同时要注意：脚本必须在目标DOM元素加载完成后执行，否则会找不到元素。

几种正确实现方式 #

方式一：使用getElementsByClassName（兼容旧浏览器） #

// 等待DOM全部加载完成再执行
document.addEventListener('DOMContentLoaded', function() {
  const postMetaElements = document.getElementsByClassName('post-meta');
  // 确保找到元素再设置样式
  if (postMetaElements.length > 0) {
    postMetaElements[0].style.position = 'absolute';
  }
});

方式二：使用querySelector（推荐，写法更简洁） #

querySelector直接返回匹配选择器的第一个元素，无需处理集合：

document.addEventListener('DOMContentLoaded', function() {
  const postMeta = document.querySelector('.post-meta');
  if (postMeta) {
    postMeta.style.position = 'absolute';
  }
});

方式三：脚本放在页面底部（无需监听加载事件） #

如果把脚本放在</body>标签之前，此时DOM已经加载完成，可以直接执行：

<script>
const postMeta = document.querySelector('.post-meta');
if (postMeta) {
  postMeta.style.position = 'absolute';
}
</script>
</body>

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