動態地添加顏色到添加文本

我正在處理appendChild（）方法的這個示例，但區別在這裏，我正嘗試向文本動態添加更多文本。沒錯，但最難的部分是文本我想添加顏色會變成紅色，我可以這樣做嗎？我試圖動態地添加顏色到添加文本

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

但它並沒有work.so，這個任務可以怎麼做？請幫忙，謝謝!!!!

完整代碼如下............

<!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>

來源

2014-03-26 AL-zami

你不能直接應用樣式文本節點，並且不設置樣式作爲元素的屬性。他們需要繼續使用元素上的'style'對象。 –

您通常需要使用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); 
}

此外應注意：

的顏色分配和appendChild是任意調用的順序。下面也將是可能的：

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"; 
}

來源

2014-03-26 20:21:55 ComFreek

非常感謝！ :) –

給出。如果這一切都在你的DIV，你可以嘗試

document.getElementById("mydiv").style.color="#ff0000";

來源

2014-03-26 20:20:33 pjc

mydiv.style.color = 'red';

或只是在css

#mydiv { color: red; }

如果你有div內的其他元素，你不想變成紅色，你需要在追加之前將新文本包裹在span或div或其他元素中。

與jQuery這將是超級簡單：

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

來源

2014-03-26 20:20:35

動態地添加顏色到添加文本

回答

相關問題