如何编写脚本实现博客文章交替布局且最新文章始终居左

嘿，我来帮你搞定这个问题！首先得指出你原来写的JS代码里的几个小问题：

• 你用了document.getElementById("article")，但这个是用来选id为article的元素，而非所有<article>标签，应该用querySelectorAll来选中所有文章元素
• 条件"article" % 2完全不对哦，字符串和数字取模没有实际意义，我们需要根据每篇文章在列表里的位置来判断该加哪个类

接下来给你一套能正常工作的方案，逻辑清晰还能优化代码冗余：

先优化你的CSS（减少重复代码） #

把所有文章的公共样式抽出来，只保留差异化的布局属性，维护起来更方便：

/* 所有文章的基础样式 */
article {
  margin: 10px;
  width: 400px;
  color: blueviolet;
}

article h2 {
  background-color: blueviolet;
  font-size: 20px;
  color: black;
  width: 400px;
}

/* 居左文章的差异化样式 */
.leftarticle {
  margin-right: auto;
}

/* 居右文章的差异化样式 */
.rightarticle {
  margin-left: auto;
}

核心JS脚本（自动给文章加类） #

这个脚本会在页面DOM加载完成后自动执行，确保能找到所有文章元素：

document.addEventListener("DOMContentLoaded", function() {
  // 获取页面上所有的article标签
  const articles = document.querySelectorAll("article");
  
  // 遍历每一篇文章，index是它的位置索引（从0开始计数）
  articles.forEach((article, index) => {
    // 最新的文章是第一个，索引为0（偶数），加leftarticle类
    if (index % 2 === 0) {
      article.classList.add("leftarticle");
    } else {
      // 索引为奇数的文章，加rightarticle类，实现交替布局
      article.classList.add("rightarticle");
    }
  });
});

这样不管你新增多少篇文章，只要把新文章放在最前面（作为最新帖），脚本都会自动给它加上leftarticle类，后面的文章会依次交替左右布局，完全不用手动修改类名啦！

备注：内容来源于stack exchange，提问作者leefylavish