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

Question

如何获取与 liList 变量关联的 JavaScript 循环，以影响 DOM，而不会覆盖任何其他样式？

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

//JavaScript style to effect HTML abbr
var styleAbbr = document.createElement('style');
styleAbbr.type = 'text/css';
styleAbbr.innerHTML = '.myAbbr {font-style: italic; letter-spacing: .4em;}';
document.getElementsByTagName('head')[0].appendChild(styleAbbr);
document.querySelector('abbr').className = 'myAbbr';

//the JavaScript for the loop
var msg = '';
var i = 0;
var liList = document.querySelectorAll('li.menuItem');

if (i < liList.length) {
for (var i = 0; i < liList.length; i++) {

//liList[i].textContent gets the text form the li element in the DOM
var listWording = liList[i].textContent;

//liList.innerHTML applies my style and pushes listWording into the DOM
msg += '<li style="background: red; margin-top: 10px;">'
    + listWording
    + '</li>';
}
}

//I believe that the issue is that .innerHTML = msg.
document.getElementById('mMain').innerHTML = msg;

ul {
    font-size: 1.4em;
    list-style: none;
    }

ul li a {
    text-decoration: none;
    color: #e69b1e;
    }

<ul id="mMain">
    <li class="menuItem">
        <a href="#">
            <abbr title="HyperText Markup Language">HTML</abbr>
        </a>
    </li>
    <li class="menuItem">
        <a href="#">About</a>
    </li>
    <li class="menuItem">
        <a href="#">Gallery</a>
    </li>
    <li class="menuItem">
        <a href="#">Contact</a>
    </li>
</ul>

理想情况下，我希望将我的 JavaScript 样式放在它自己的变量中，并将其循环到“menuItem”类中，同时不影响任何其他预定义类，但是我不太确定如何将该变量调用到循环中。

var menuItemClass = document.createElement('style');
menuItemClass.type = 'text/css';
menuItemClass.innerHTML = '.menuStyle {background: red; margin-top: 10px;}';
document.getElementsByTagName('head')[0].appendChild(menuItemClass);

我也知道我可以在我的 CSS 中有一个类来完成所有这些，然后引用它。
不过，我对如何在 JavaScript 中实现这一点很感兴趣。
谢谢。

Answer 1

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

var styleAbbr = document.createElement('style');
styleAbbr.type = 'text/css';
styleAbbr.innerHTML = '.myAbbr {font-style: italic; letter-spacing: .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');

if (i < liList.length) {
for (var i = 0; i < liList.length; i++) {
liList[i].className = 'menuStyle';
}
}

ul li {
    font-size: 1.4em;
    list-style: none;
    }

ul li a {
    text-decoration: none;
     color: #e69b1e;
     }

<ul id="mMain">
    <li class="menuItem">
        <a href="#">
            <abbr title="HyperText Markup Language">HTML</abbr>
        </a>
    </li>
    <li class="menuItem">
        <a href="#">About</a>
    </li>
    <li class="menuItem">
        <a href="#">Gallery</a>
    </li>
    <li class="menuItem">
        <a href="#">Contact</a>
    </li>
</ul>

Answer 2

我正在回答如何在不影响预定义的情况下将类添加到动态创建的每个 li 元素。所以根据菜单项innerText创建类，并从定义的数组colors中获取类的背景色

//JavaScript style to effect HTML abbr
var styleAbbr = document.createElement('style');
styleAbbr.type = 'text/css';
styleAbbr.innerHTML = '.myAbbr {font-style: italic; letter-spacing: .4em;}';
document.getElementsByTagName('head')[0].appendChild(styleAbbr);
document.querySelector('abbr').className = 'myAbbr';

//the JavaScript for the loop
var msg = '';
var i = 0;
var liList = document.querySelectorAll('li.menuItem');
//defining background colours
var colors = ['red', 'orange', 'green', 'brown', 'blue'];
var j = 0;
if (i < liList.length) {
  for (var i = 0; i < liList.length; i++) {
    //creating class as the innerText content
    if (j >= colors.length) {
      j = 0
    }

    var menuItemClass = document.createElement('style');
    menuItemClass.type = 'text/css';
    menuItemClass.innerHTML = '.' + liList[i].innerText + ' {background: ' + colors[j] + '; margin-top: 10px;}';
    document.getElementsByTagName('head')[0].appendChild(menuItemClass);
    j++;

    //liList[i].textContent gets the text form the li element in the DOM
    var listWording = liList[i].textContent;

    //liList.innerHTML applies my style and pushes listWording into the DOM
    if (i == 0) {
      msg += liList.innerHTML =
        '<li class="myAbbr ' + listWording + '">' +
        listWording +
        '</li>';
    } else {
      msg += liList.innerHTML =
        '<li class=" ' + listWording + '">' +
        listWording +
        '</li>';
    }
  }
}

//I believe that the issue is that .innerHTML = msg.
document.getElementById('mMain').innerHTML = msg;

ul {
  font-size: 1.4em;
  list-style: none;
}

ul li a {
  text-decoration: none;
  color: #e69b1e;
}

<ul id="mMain">
  <li class="menuItem">
    <a href="#">
      <abbr title="HyperText Markup Language">HTML</abbr>
    </a>
  </li>
  <li class="menuItem">
    <a href="#">About</a>
  </li>
  <li class="menuItem">
    <a href="#">Gallery</a>
  </li>
  <li class="menuItem">
    <a href="#">Contact</a>
  </li>
</ul>