如何循环JavaScript节点列表并应用JavaScript样式？

如何让与liList变量关联的JavaScript循环影响domwhist而不凌驾于任何其他样式之上

我希望我的菜单项仍然是橙色的，并且第一个列表项保留在JavaScript中创建的styleAbbr变量上

//影响HTML缩写的JavaScript样式
var styleAbbr=document.createElement（'style'）；
styleAbbr.type='text/css'；
styleAbbr.innerHTML='.myAbbr{字体样式：斜体；字母间距：.4em；}'；
document.getElementsByTagName（'head'）[0].appendChild（styleAbbr）；
document.querySelector（'abbr'）。className='myAbbr'；
//循环的JavaScript
var msg=''；
var i=0；
var liList=document.querySelectorAll（'li.menuItem'）；
如果（i<列表长度）{
对于（变量i=0；i
ul{
字号：1.4em；
列表样式：无；
}
ullia{
文字装饰：无；
颜色：#e69b1e；
}









我找到了一个引用JavaScript定义样式的解决方案


var styleAbbr=document.createElement（'style'）；
styleAbbr.type='text/css'；
styleAbbr.innerHTML='.myAbbr{字体样式：斜体；字母间距：.4em；}'；
document.getElementsByTagName（'head'）[0].appendChild（styleAbbr）；
document.querySelector（'abbr'）。className='myAbbr'；
var menuItemClass=document.createElement（'style'）；
menuItemClass.type='text/css'；
menuItemClass.innerHTML='.menuStyle{background:red；margin top:10px；}'；
document.getElementsByTagName（'head'）[0].appendChild（menuItemClass）；
var msg=''；
var i=0；
var liList=document.querySelectorAll（'li.menuItem'）；
如果（i<列表长度）{
对于（变量i=0；i

ulli{
字号：1.4em；
列表样式：无；
}
ullia{
文字装饰：无；
颜色：#e69b1e；
}









我正在回答如何向动态创建的每个
li
元素添加类，而不影响预定义的属性。因此，根据菜单项
innerText
创建类，并从数组定义的
colors


//影响HTML缩写的JavaScript样式
var styleAbbr=document.createElement（'style'）；
styleAbbr.type='text/css'；
styleAbbr.innerHTML='.myAbbr{字体样式：斜体；字母间距：.4em；}'；
document.getElementsByTagName（'head'）[0].appendChild（styleAbbr）；
document.querySelector（'abbr'）。className='myAbbr'；
//循环的JavaScript
var msg=''；
var i=0；
var liList=document.querySelectorAll（'li.menuItem'）；
//定义背景色
var colors=[“红色”、“橙色”、“绿色”、“棕色”、“蓝色”]；
var j=0；
如果（i<列表长度）{
对于（变量i=0；i=colors.length）{
j=0
}
var menuItemClass=document.createElement（'style'）；
menuItemClass.type='text/css'；
menuItemClass.innerHTML='.+liList[i].innerText+'{background:'+colors[j]+'；页边空白顶部：10px；}'；
document.getElementsByTagName（'head'）[0]。appendChild（menuItemClass）；
j++；
//liList[i].textContent从DOM中的li元素获取文本
var listWorming=liList[i].textContent；
//innerHTML应用我的样式并将listWording推送到DOM中
如果（i==0）{
msg+=liList.innerHTML=
“
”+
列表措辞+
“
”；
}否则{
msg+=liList.innerHTML=
“
”+
列表措辞+
“
”；
}
}
}
//我认为问题在于.innerHTML=msg。
document.getElementById（'mMain'）。innerHTML=msg
ul{
字号：1.4em；
列表样式：无；
}
ullia{
文字装饰：无；
颜色：#e69b1e；
}









是否要动态创建类并应用于现有菜单中的每个li元素？li试图了解如何在JavaScript循环中创建样式，找到了一个解决方案，这是我的最终目标。看看我的答案。困难在于myAbbr类应该只应用于第一个菜单项，css颜色被覆盖。当
i==0
时，则只添加选定的类