如何使用Javascript编辑文本样式

我试图使一个按钮在列表中创建新条目，该列表显示如下：

“#1新建单击我”

除了我想让“单击我”在黑框中显示为黄色文本，然后我想让黑框消失，鼠标悬停时文本变成棕色。我已经能够使列表显示，但不知道如何编辑文本的样式，使其以我想要的方式显示。我认为我需要给出的代码最多如下：

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

然后我在列表中插入李

---

我想我应该让newClickMe成为一个变量并编辑它，然后把它放在liBody变量中其余文本的旁边，我想HTML span元素是实现这一点的最好方法，只是我甚至不知道span元素到底做了什么。如何编辑特定字符串的样式？在我这么做之前，我无法想出如何（如果我能做到的话）使鼠标上的文本变成棕色。

从未见过CreateTextNode，但我想

liBody.style.fontSize=“12px”

应该会有所帮助。和其他属性，如“fontWeight、color、fontStyle…”

HTML元素具有一个

样式

属性，可用于将CSS样式应用于它们

例如：

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);

将使列表项具有黄色文本的黑色背景

有关style属性的详细信息，MDN有一个很好的章节：

---

这里有一个将CSS属性转换为JavaScript等价物的参考页面：

我假设您希望在鼠标悬停时更改样式。我刚刚用css修改了样式：hover。这就是你的想法吗

var numOfNewCMs=1；
函数generateLi（）{
var li=document.createElement（“li”）；
var liBody=document.createTextNode（“#”+numOfNewCMs+
“新”）；
var sp=document.createElement（“span”）；
var spBody=document.createTextNode（“单击我”）；
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）；
李.儿童（liBody）；
李.儿童（sp）；
李氏；
numOfNewCMs++；
}
功能突出显示（id）{
var元素=document.getElementById（'sp'+id）；
元素。样式。背景颜色='白色'；
元素.style.color='brown'；
}
功能指示灯2（id）{
var元素=document.getElementById（'sp'+id）；
元素.样式.背景色='黑色'；
element.style.color='yellow'；
}

li{
边缘底部：20px；
}
li>span{
填充物：5px；
边缘底部：10px；
}
李：悬停>跨距{
颜色：棕色；
背景色：白色；
}

点击我

嘿，谢谢！我假设如果我将newClickMe作为一个单独的变量，然后将其添加到liBody的其余部分，它将只使字符串中的“ClickMe”部分采用这种样式，对吗？完全正确，如果您将newClickMe作为自己的元素，如

span

或其他什么，你可以专门为它应用样式；var newClickMe=document.createTextNode（“单击我”）；x.style.backgroundColor=“#000000”；x.style.color=“FFFF00”；var liBody=document.createTextNode（“#”+numOfNewCMs+“new”+x）`它打印了#1个新的[object HtmlPanelment]对不起，我应该解释一下。web控制台告诉我newClickMe.style未定义，所以我尝试创建一个名为x的span元素来附加newClickMe，然后将其添加到libbody变量中。你是人类中的神。非常感谢你！我不能使用CSS，因为我是从一个单独的.js文件中完成所有这些工作的，你知道单独使用javascript有什么方法吗？当然可以。查看上面我编辑的代码。