Question

我正按照标题所建议的那样，在整个站点上随机分配我的h1标题的字体。所有这些都使用php count分配了一个单独的ID，因此格式为project-title-1，project-title-2等。

我已根据我在此处发现的类似问题重新设计了此代码的用途，但尝试将其应用到其他元素上。

当前，如果我从querySelector中删除“全部”，它将对页面的第一个元素起作用，但对其他元素不起作用，因此代码可以起作用，但是某处存在问题。

任何见识将不胜感激！干杯

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返回元素的集合。因此，您需要仔细阅读每个课程，然后分别应用该课程。

Answer 2

您的代码有一些问题：

您只能在开始时调用一次随机字体数组
正如31piy所说，您必须遍历querySelectorAll返回的元素
在jsfiddle的示例中，您将类“ Arial”命名为大写字母“ A”，但在数组中放入了小写字母“ 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();
}

https://jsfiddle.net/psvu78aq/9/

使用Javascript在整个站点范围内更改某些元素的字体

2 个答案: