我能够在浏览器中显示 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并进行一些更改时,一切都工作正常。
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>
或者您还有其他要求吗?