如何为数组中单个段落元素设置不同CSS字体与颜色样式

下面提供几种实用的实现方式，你可以根据需求选择：

方法一：使用CSS类名（推荐，样式与逻辑分离） #

先在CSS中定义好不同的样式类，再创建一个对应段落索引的类名数组，生成元素时为其添加对应的类。

/* 先在样式表中定义各类样式 */
.para-style-1 {
  color: #ff4444;
  font-size: 16px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.para-style-2 {
  color: #00C851;
  font-size: 18px;
  font-style: italic;
  border-bottom: 1px dashed #00C851;
}
.para-style-3 {
  color: #33b5e5;
  font-size: 20px;
  background-color: rgba(51,181,229,0.1);
  padding: 4px 8px;
  border-radius: 4px;
}
/* 可继续定义到para-style-10，对应10个段落 */

修改JavaScript代码：

const texts = [
  "Paragraph: 1",
  "Paragraph: 2",
  "Paragraph: 3",
  "Paragraph: 4",
  "Paragraph: 5",
  "Paragraph: 6",
  "Paragraph: 7",
  "Paragraph: 8",
  "Paragraph: 9",
  "Paragraph: 10"
];
// 定义与texts索引对应的类名数组
const paraClasses = [
  "para-style-1",
  "para-style-2",
  "para-style-3",
  "para-style-4",
  "para-style-5",
  "para-style-6",
  "para-style-7",
  "para-style-8",
  "para-style-9",
  "para-style-10"
];

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(paraClasses[currentParaIdx]);
  currentParaIdx++;

  div.style.position = "absolute";
  div.style.left = clientX + "px";
  div.style.top = clientY + "px";

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

方法二：使用内联样式数组 #

如果样式比较简单，或者需要动态生成样式，可以直接在JavaScript中定义样式对象数组，生成元素时直接应用：

const texts = [
  "Paragraph: 1",
  "Paragraph: 2",
  "Paragraph: 3",
  "Paragraph: 4",
  "Paragraph: 5",
  "Paragraph: 6",
  "Paragraph: 7",
  "Paragraph: 8",
  "Paragraph: 9",
  "Paragraph: 10"
];
// 定义每个段落对应的内联样式对象
const paraStyles = [
  { color: "#ff4444", fontSize: "16px", fontWeight: "bold" },
  { color: "#00C851", fontSize: "18px", fontStyle: "italic" },
  { color: "#33b5e5", fontSize: "20px", backgroundColor: "rgba(51,181,229,0.1)" },
  // 继续定义剩余7个段落的样式
];

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];
  // 应用对应的内联样式
  Object.assign(div.style, paraStyles[currentParaIdx]);
  currentParaIdx++;

  div.style.position = "absolute";
  div.style.left = clientX + "px";
  div.style.top = clientY + "px";

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

方法三：动态计算样式（适合有规律的样式） #

如果样式有规律（比如颜色渐变、字号递增），可以根据段落索引动态计算样式，不用提前定义数组：

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

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];
  // 根据索引动态计算样式
  const idx = currentParaIdx;
  div.style.color = `hsl(${idx * 36}, 70%, 50%)`; // 每段颜色按色相环递增
  div.style.fontSize = `${14 + idx * 1.2}px`; // 字号随索引增大
  div.style.fontWeight = idx % 2 === 0 ? "normal" : "bold"; // 奇偶段字体粗细交替
  currentParaIdx++;

  div.style.position = "absolute";
  div.style.left = clientX + "px";
  div.style.top = clientY + "px";

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

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