如何更改单个数组元素的字体和颜色

Question

The user is able to click anywhere on the screen and the paragraphs are printed out one by one in the mouse location that the user chooses. However I want to have these paragraphs in different styles so my question is, how do I have different css elements for each paragraph in the array? Any help would be much appreciated.

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

// Keeps Track of Current Text
let currentParaIdx = 0;

document.addEventListener("click", (e) => {
  // Stop once All Texts are Displayed
  if (currentParaIdx === texts.length) return;

  const { clientX, clientY } = e; //get the click position

  //create the div
  const div = document.createElement("div");

  //set its text
  div.innerText = texts[currentParaIdx];
  currentParaIdx++;

  //set its position and position style
  div.style.position = "absolute";
  div.style.left = clientX + "px";
  div.style.top = clientY + "px";

  document.body.append(div); //add div to the page
});

This is my code so far so how can I incorporate css into these individual paragraphs?

Answer 1

So one way is to have a class for each element. Put all the classes in a array like the text and assign the relative classes to the relative element's classlist. But if you have an undefined number of elements and each of these needs a different class you might want to have a common class for the common features and modify the styles based on each paragraphs needs.

 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 gray-bg font-1", "blue font-2", "red", "blue", "red", "blue", "red", "blue", "red", "blue", ]; // Keeps Track of Current Text let currentParaIdx = 0; document.addEventListener("click", (e) => { // Stop once All Texts are Displayed if (currentParaIdx === texts.length) return; const { clientX, clientY } = e; //get the click position //create the div const div = document.createElement("div"); //set its text div.innerText = texts[currentParaIdx]; //set its position and position style div.classList=classes[currentParaIdx]; div.style.position = "absolute"; div.style.left = clientX + "px"; div.style.top = clientY + "px"; currentParaIdx++; document.body.append(div); //add div to the page });

 .red{color:red}.blue{color:blue}.gray-bg{ background:darkgreen;} /*CHANGE TEXT TO ELEMENT TO THIS CLASS*/.font-1{font-style:italic; font-family:'system-ui'}.font-2{font-style:italic; font-family:'serif'} /*CHANGE TEXT TO ALL ELEMENTS*/ *{ font-family: Arial, Helvetica, sans-serif;}