如何使用Javascript编辑文字样式

Question

I'm trying to make a button create new entries in a list that display similar to this:

"#1 new Click Me"

Except I want to make "Click Me" to show up as yellow text in a black box, and then I want to make the black box disappear and the text turn brown on mouseover. I've been able to make the list appear, but don't know how to edit the style of the text to make it appear the way I want to. The most code I think I need to give for this is this:

var li = document.createElement("li");
var liBody = document.createTextNode("#"+numOfNewCMs+
     " new " + newClickMe);
li.appendChild(liBody);

And then I insert li into the list.

I figure I should make newClickMe a variable and edit that and then put it next to the rest of the text in the liBody variable, and I figure the HTML span element is the best way to do that, except I don't even know quite what the span element really does. How do I go about editing the style of that particular string? I can't get around to figuring out how (if I even can) make the text turn brown on mouseover until I do so.

Answer 1

Never met CreateTextNode, but i guess liBody.style.fontSize="12px" should help. And other properties such as 'fontWeight,color,fontStyle...'

Answer 2

HTML elements have a style property that can be used to apply CSS styles to them.

For example:

var newClickMe = document.createElement("span");
newClickMe.style.backgroundColor = "#000000";
newClickMe.style.color = "#FFFF00";
newClickMe.innerText = "Click Me";

var li = document.createElement("li");
var liText = document.createTextNode("#"+numOfNewCMs+
     " new ");

li.appendChild(liText);
li.appendChild(newClickMe);

Will make the list item have a black background with yellow text.

For more details on the style property, MDN has a great section on it: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

And here is a reference page to translate CSS properties into their JavaScript equivalent: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference

Answer 3

I'm assuming you want the styles to change on mouseOver. I just changed the styles using css' :hover. Is this what you had in mind?

 var numOfNewCMs=1; function generateLi(){ var li = document.createElement("li"); var liBody = document.createTextNode("#"+numOfNewCMs+ " new "); var sp = document.createElement("span"); var spBody = document.createTextNode("Click Me"); sp.setAttribute("id", "sp"+numOfNewCMs); sp.setAttribute("onmouseover", "highlight("+numOfNewCMs+")"); sp.setAttribute("onmouseout", "highlight2("+numOfNewCMs+")"); sp.style.backgroundColor='black'; sp.style.color='yellow'; sp.appendChild(spBody); li.appendChild(liBody); li.appendChild(sp); lis.appendChild(li); numOfNewCMs++; } function highlight(id){ var element= document.getElementById('sp'+id); element.style.backgroundColor='white'; element.style.color='brown'; } function highlight2(id){ var element= document.getElementById('sp'+id); element.style.backgroundColor='black'; element.style.color='yellow'; } 

 li{ margin-bottom:20px; } li > span{ padding:5px; margin-bottom:10px; } li:hover > span{ color:brown; background-color:white; } 

 <button onclick="generateLi()">Click me</button> <div id="lis" style="margin-top:20px;"></div>