Question

这可能非常容易/显而易见。我正在撰写Chrome扩展程序。我的Javascript从任何站点捕获文本节点，并将文本的一部分更改为其他内容。我想通过更改颜色（添加标签）来标记更改的文本。

return "<font color = \"FF0000\">"+a+"</font>"

结果：

<font color = "FF0000">SomeText</font>

但我当然想要的是 SomeText 会以红色显示。

Answer 1

我建议您在Chrome扩展程序中使用CSS。所以我的解决方案将涉及给DOM元素（对于你的实例可能是一个段落或跨度）一个类。将样式属性放在HTML标记中并不是很好的约定。

<p class="red">SomeText</p>

在你的CSS文件中

.red {
    color: #ff0000 /* I actually love this color */
}

那么这如何使用JavaScript？

您可以改为将一个类添加到元素中，而不是直接将样式添加到HTML标记中。

document.getElementByTagName("p").className = "red";

或者，如果您想要定位特定ID

document.getElementById("object").className = "red";

那个文字是红色的。由于您可以将红色类添加到DOM中任何对象的任何类属性，因此您的代码看起来比在任何地方抛出样式都要简洁。

我希望这会帮助你。如果不是，请告诉我。

Answer 2

function newText(tag, text, style) {
    var element = document.createElement(tag);              //this creates an empty node of the type specified
    element.appendChild(document.createTextNode(text));     //this creates a new text node and inserts it into our empty node
    if (style) element.setAttribute('style', style);        //this sets the style in inline CSS (warning, this needs different syntax in IE)
    return element;                                         //this returns a DOM object
}

这将返回一个DOM对象，您需要将其附加到另一个节点。

var myText = newText('p', 'This is some text!', 'color: red;');
document.getElementById('myTextBox').appendChild(myText);

Answer 3

您需要在样式表中添加颜色...... 与<input type="text" style="color:red" value="sometext"/>一样。

如何使用Javascript在文本节点中添加标签

3 个答案: