如何在使用textContent时设置特定数组元素的样式?

问题描述 投票:0回答:1

我能够在浏览器中显示 forEach 方法的每个数组元素的值。但我无法在使用 texContent 时应用、显示特定样式以及 css 到特定数组元素。是的,我理解 textcontent 代表“代表指定节点的文本内容”。但我需要一些其他方法来满足要求。例如,在输出中,我需要值“1.book”应为绿色,24px,值“2.notepad”应为橙色,10px。我试图在网上找到符合我水平的最佳答案,但尚未找到“textContent 的样式特定数组元素”。所以在这里问。

使用文本内容:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
    <style>
#mno{
white-space:pre;}
</style>
  </head>
  <body>
      <p id="mno"></p>
      <script>
let abc=['1.book','2.notepad','3.computer'];
abc[0] = '<span style="color:green;border:1px solid green;font-size:40px;">' + abc[0] + '</span>';
abc[1] = '<span style="color:orange">' + abc[1] + '</span>';
abc[2] = '<span style="color:brown">' + abc[1] + '</span>';
let txt = "";
abc.forEach(e=>{txt+=e+"\r\n";
document.getElementById("mno").textContent = txt;

}
);
        
      </script>
  </body>
</html>

但是在使用innerHtML并进行一些更改时,一切都工作正常。

javascript arrays
1个回答
0
投票

InnerHTML没有解决吗? 你更换了吗

document.getElementById("mno").textContent = txt;

document.getElementById("mno").innerHTML = txt;

像这样吗?

<!DOCTYPE html>
<html>
  <head>
    <title>Hello, World!</title>
    <style>
#mno{
white-space:pre;}
</style>
  </head>
  <body>
      <p id="mno"></p>
      <script>
let abc=['1.book','2.notepad','3.computer'];
abc[0] = '<span style="color:green;border:1px solid green;font-size:40px;">' + abc[0] + '</span>';
abc[1] = '<span style="color:orange">' + abc[1] + '</span>';
abc[2] = '<span style="color:brown">' + abc[1] + '</span>';
let txt = "";
abc.forEach(e=>{txt+=e+"\r\n";
document.getElementById("mno").innerHTML = txt;

}
);
        
      </script>
  </body>
</html>

或者您还有其他要求吗?

© www.soinside.com 2019 - 2024. All rights reserved.