javascript - 在字符串末尾添加不同的样式

Question

我认为这是一个简单的问题，但由于我是 javaScript 的新手......

我用这个得到了一个 H1 innerHTML：

var myBeta = "Beta";

var myNode = document.getElementsByTagName("h1");

myNode[0].innerHTML = "New List of Materials " + myBeta;

连接 H1 中的两个文本字符串时，如何使单词“Beta”变为橙色？

Answer 1

问题是它们都在同一个 DOM 节点中（在这种情况下，相同的 h1），所以你不能区分第一个词和第二个词。您需要做的是将您想要的橙色单词放在 h1 中的一个单独的跨度中。像这样：

<h1>
    This is black <span id="orange"> and this is orange</span>
</h1>

所以你的代码应该是这样的：

HTML-空 h1 和 span 等待你的 JS 填充它

<h1><span id="orange"></span></h1>

CSS-使跨度实际上是橙色的

#orange {
    color: orange;
}

JS

var myBeta = "Beta";
var blackWord = document.getElementsByTageName("h1");
var orangeNode = document.getElementById("orange");

blackWord[0].innerHTML = "New List of Materials";
orangeNode.innerHTML = myBeta;

Answer 2

您需要将 Beta 字符串包装在另一个元素中：

var myBeta = "Beta";
var wrappedBeta = '<span style="color:orange">' + myBeta + '</span>';
var myNode = document.getElementsByTagName("h1");

myNode[0].innerHTML = "New List of Materials " + wrappedBeta;

随意提取外部样式表中的样式信息并将span标记更改为语义上更正确的内容（strong例如）。