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

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
}

This will return a DOM object, and you will need to append it to another node.

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"/>。