如何使用Javascript编辑文本样式

Question

我正在尝试让一个按钮在列表中创建新条目，其显示与此类似：

“#1 新点击我”

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

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

然后我将 li 插入列表中。

我认为我应该将 newClickMe 创建为一个变量并对其进行编辑，然后将其放在 liBody 变量中的其余文本旁边，并且我认为 HTML span 元素是执行此操作的最佳方法，但我什至不知道这正是 span 元素的真正作用。我该如何编辑该特定字符串的样式？在我这样做之前，我无法弄清楚如何（如果我能的话）使文本在鼠标悬停时变成棕色。

Answer 1

从未见过CreateTextNode，但我想

liBody.style.fontSize="12px"

应该有所帮助。以及其他属性，例如“fontWeight、颜色、fontStyle...”

Answer 2

HTML 元素有一个

style

属性，可用于对其应用 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);

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

有关样式属性的更多详细信息，MDN 有一个很棒的部分：https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

这里有一个参考页面，用于将 CSS 属性转换为其等效的 JavaScript 属性：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference

Answer 3

我假设您希望在鼠标悬停时更改样式。我刚刚使用 css' :hover 更改了样式。这就是你的初衷吗？

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>