如何为交互式网页中数组元素对应的段落修改字体大小与样式

方法一：用CSS类统一管理所有样式（推荐） #

这种方式把样式逻辑和JS代码分离，更易维护和扩展。你可以在CSS中定义包含颜色、字体、字号的类，然后在JS中直接给元素添加对应的类。

1. 首先在HTML中添加CSS样式：

<style>
/* 定义包含完整样式的类 */
.red-serif-16 {
  color: red;
  font-family: 'Times New Roman', serif;
  font-size: 16px;
}
.blue-sans-20 {
  color: blue;
  font-family: Arial, sans-serif;
  font-size: 20px;
}
.red-monospace-18 {
  color: red;
  font-family: 'Courier New', monospace;
  font-size: 18px;
}
.blue-serif-22 {
  color: blue;
  font-family: 'Times New Roman', serif;
  font-size: 22px;
}
/* 可按需扩展更多样式类 */
</style>

2. 修改JS中的classes数组为对应的类名：

const texts = [
  "Paragraph: 1",
  "Paragraph: 2",
  "Paragraph: 3",
  "Paragraph: 4",
  "Paragraph: 5",
  "Paragraph: 6",
  "Paragraph: 7",
  "Paragraph: 8",
  "Paragraph: 9",
  "Paragraph: 10"
];

// 替换为新的样式类名
const classes = [
  "red-serif-16",
  "blue-sans-20",
  "red-monospace-18",
  "blue-serif-22",
  "red-serif-16",
  "blue-sans-20",
  "red-monospace-18",
  "blue-serif-22",
  "red-serif-16",
  "blue-sans-20"
];

let currentParaIdx = 0;

document.addEventListener("click", (e) => {
  if (currentParaIdx === texts.length) return;

  const { clientX, clientY } = e;
  const div = document.createElement("div");

  div.innerText = texts[currentParaIdx];
  div.classList.add(classes[currentParaIdx]); // 用add方法添加类，避免覆盖其他样式
  div.style.position = "absolute";
  div.style.left = clientX + "px";
  div.style.top = clientY + "px";

  currentParaIdx++;
  document.body.append(div);
});

方法二：直接通过JS内联样式设置 #

如果是简单场景，也可以直接在JS中定义字体和字号的数组，给每个元素设置对应的内联样式：

const texts = [
  "Paragraph: 1",
  "Paragraph: 2",
  "Paragraph: 3",
  "Paragraph: 4",
  "Paragraph: 5",
  "Paragraph: 6",
  "Paragraph: 7",
  "Paragraph: 8",
  "Paragraph: 9",
  "Paragraph: 10"
];

const colors = ["red", "blue", "red", "blue", "red", "blue", "red", "blue", "red", "blue"];
// 定义字体数组，带空格的字体名需用引号包裹
const fontFamilies = [
  "'Times New Roman', serif",
  "Arial, sans-serif",
  "'Courier New', monospace",
  "'Times New Roman', serif",
  "'Times New Roman', serif",
  "Arial, sans-serif",
  "'Courier New', monospace",
  "'Times New Roman', serif",
  "'Times New Roman', serif",
  "Arial, sans-serif"
];
// 定义字号数组
const fontSizes = ["16px", "20px", "18px", "22px", "16px", "20px", "18px", "22px", "16px", "20px"];

let currentParaIdx = 0;

document.addEventListener("click", (e) => {
  if (currentParaIdx === texts.length) return;

  const { clientX, clientY } = e;
  const div = document.createElement("div");

  div.innerText = texts[currentParaIdx];
  // 直接设置颜色、字体、字号
  div.style.color = colors[currentParaIdx];
  div.style.fontFamily = fontFamilies[currentParaIdx];
  div.style.fontSize = fontSizes[currentParaIdx];
  
  div.style.position = "absolute";
  div.style.left = clientX + "px";
  div.style.top = clientY + "px";

  currentParaIdx++;
  document.body.append(div);
});

说明 #

• 方法一更适合复杂场景，样式调整只需修改CSS，无需改动JS代码；
• 方法二更适合快速测试或简单需求，直接在JS中配置即可；
• 字体名称包含空格时，必须用引号包裹（如'Times New Roman'），确保浏览器正确识别。

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