时间戳

首页 > 解决方案 > 使用 Javascript 更改站点范围内刷新时某些元素的字体

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

问题描述

正如标题所暗示的那样，我试图在整个网站上随机化我的 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/

标签： javascriptfonts

解决方案

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

但是，只是为了修复您的代码，以下应该可以工作：

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

原因是（如您所知），document.querySelectorAll返回元素的集合。所以你需要经历每一个，然后单独应用这个类。

推荐阅读