为何仅单篇文章样式变更？WordPress随机宽度实现咨询

你猜的思路方向是对的，但首先得修正一个基础的HTML规范问题——id是页面唯一标识，你现在给所有<article>都用了id="demo"，这不仅不符合标准，而且document.getElementById()只会找到页面中第一个带有这个id的元素，所以后面的文章根本不会被修改宽度。

正确的做法分两步：

1. 把文章的id改成class #

先修改你的PHP循环代码，将id="demo"替换成class="random-width-post"（class可以重复使用）：

while(have_posts()) { the_post();?>
<article class="random-width-post" style="border:1px solid black">
  <h2><?php the_title(); ?></h2>
  <?php the_content(); ?>
</article>
<?php } ?>

2. 用JS遍历所有文章设置随机宽度 #

不需要复杂的for循环（当然用for也可以，不过forEach更简洁直观），先获取所有带目标class的元素，再逐个设置随机宽度：

// 等待DOM加载完成后执行（避免元素还没渲染就执行JS）
document.addEventListener('DOMContentLoaded', function() {
  // 获取所有需要设置随机宽度的文章
  const posts = document.querySelectorAll('.random-width-post');
  
  // 遍历每篇文章
  posts.forEach(post => {
    // 生成1-3的随机数，计算对应的宽度百分比
    const divisor = Math.floor(Math.random() * 3) + 1;
    const randomWidth = 100 / divisor;
    post.style.width = `${randomWidth}%`;
  });
});

额外说明 #

• 我把代码放在了DOMContentLoaded事件里，确保页面所有元素都渲染完成后再执行JS，避免出现找不到元素的问题。
• 如果你的网站有无限滚动这类动态加载文章的功能，需要把这段JS逻辑放到加载新文章完成后的回调函数里，否则新加载的文章不会被设置宽度。

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