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）。

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

2 个答案: