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

Question

正如标题所示，我正在尝试在整个网站上随机化我的 h1 标题的字体。所有这些都使用 php count 分配一个单独的 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;

这里的基本工作示例: https://jsfiddle.net/psvu78aq/2/

Answer 1

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

但是，为了修复您的代码，以下内容应该有效:

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

原因是(正如您所知)，document.querySelectorAll 返回一个元素集合。因此，您需要仔细检查每个内容，然后单独应用该类。