为添加的文本动态添加颜色

add color dynamically to added text

本文关键字：添加 颜色 动态 文本      更新时间：2023-09-26

我正在研究这个appendChild((方法的例子。但不同的是，我正在尝试向div动态添加更多的文本。这没关系。但困难的是我想添加的文本将是红色的。我该怎么做？我试过

  text.setAttributes('color',"red");

但是它不起作用。那么，这个任务怎么能完成呢？？请帮忙，谢谢！！！！

完整代码如下。。。。。。。。。。。。

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function create_text(){
    var mydiv = document.getElementById("mydiv");
    var text = document.createTextNode(" New text to add.");
    mydiv.appendChild(text);
}
</script>
</head>
<body>
<button onclick="create_text();">Create Text Node</button>
<div id="mydiv">Welcome, here is some text.</div>
</body>
</html>

通常必须使用CSS属性，但文本节点不能应用CSS属性。因此，您需要另一个容器元素：

你可以选择任何你想要的容器元素，例如div、span等。它只需要能够包含一个文本节点。有了一个元素，我们就可以访问styles属性并设置各种样式(在您的情况下是color属性(。

→jsFiddle

function create_text(){
    var mydiv = document.getElementById("mydiv");
    var container = document.createElement("span");
    var text = document.createTextNode(" New text to add.");
    container.appendChild(text);
    container.style.color = "red";
    mydiv.appendChild(container);
}

进一步说明：

  • CCD_ 5的颜色分配和调用的顺序是任意的。以下也是可能的：

    function create_text(){
  var mydiv = document.getElementById("mydiv");
  var container = document.createElement("span");
  var text = document.createTextNode(" New text to add.");
  container.appendChild(text);
  mydiv.appendChild(container);
  container.style.color = "red";
}

mydiv.style.color = 'red';

或者只是在css 中

#mydiv { color: red; }

如果div中有其他不希望为红色的元素，则需要在追加之前将新文本包装在span或div或其他元素中。

使用jquery，这将非常容易：

$('#mydiv').append('<span style="color:red">this is new text</span>');

如果div中的所有内容都是这样，您可以尝试

document.getElementById("mydiv").style.color="#ff0000";
相关文章：