Question

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

“＃1 new Click Me”

除非我想让“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"应该有所帮助。和其他属性，如＆＃39; fontWeight，color，fontStyle ......＆＃39;

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

我假设您希望在mouseOver上更改样式。我只是使用css'来改变样式：hover。这是你的想法吗？

<h:form id="form" >
   <h:panelGroup>
     <h:selectBooleanCheckbox value="#{item.value}">
     <f:ajax listener="#{bean.test()}" execute="@this" render=":form:modes"/>
   </h:panelGroup>

   <rich:collapsiblePanel id="modes" header="Show/hide" switchType="client">
       ........
   </rich:collapsiblePanel>
</h:form>

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

如何使用Javascript编辑文本样式

3 个答案: