使用Javascript在站点范围内刷新时更改某些元素的字体

我正试图像标题所暗示的那样，在整个网站上随机选择我的h1标题的字体。所有这些都使用php计数分配了一个单独的ID，因此它们采用格式project-title-1、project-title-2等

我已经根据我在这里发现的一个类似问题重新调整了代码的用途，但我尝试应用它，使其能够在多个元素上工作

目前，如果我从querySelector中删除All，它会在页面的第一个元素上工作，但不会在其他元素上工作，因此代码可以工作，但在某些地方存在问题

如有任何见解，将不胜感激！干杯

var fonts = ['hauser', 'helvetica', 'times'];
var rand = fonts[Math.floor(Math.random() * fonts.length)];
console.log(rand);

var bodyElement = document.querySelectorAll("[id^='project-title']");
bodyElement.className = rand;

这里的基本工作示例：

---

理想的方法是将类应用于父元素，以便它应用于它的所有子元素

但是，为了修复您的代码，以下操作应该有效：

var bodyElement = document.querySelectorAll("[id^='project-title']");
bodyElement.forEach(elem => elem.classList.add(rand));

---

原因是（如您所知），

document.querySelectorAll

返回元素的集合。因此，您需要逐一检查，然后分别应用该类。

您的代码有一些问题：

• 开始时只调用随机字体数组一次
• 正如31piy所说，您必须循环查询选择器all返回的元素
• 在jsfiddle上的示例中，您使用大写字母“A”将类命名为“Arial”，但在数组中使用小写字母“A”，这不起作用

以下是一个似乎有效的片段：

const fonts = ['Arial', 'helvetica', 'times'];

function getRand() {
 return fonts[Math.floor(Math.random() * fonts.length)];
}

const bodyElements = document.querySelectorAll("[id^='project-title']");
for (let bodyEl of bodyElements) {
    bodyEl.className = getRand();
}

---

谢谢，这是按问题排序的。我认为这与此有关，但我不明白为什么，但从你的解释中我知道了！