如何循环 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" class 中，同时不影响任何其他预定义的 class但是我不太确定如何将该变量调用到循环中。

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

我也知道我可以在我的 CSS 中有一个 class 做所有这些然后引用那个。
但是我很感兴趣如何在 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

我正在回答如何将 class 添加到动态创建的每个 li 元素而不影响预定义。所以根据菜单项 innerText 创建 class 并从定义的数组 colors

中为 class 取背景色

//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>

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

How to loop a JavaScript nodelist and apply a JavaScript style?

javascript

loops

dom

methods

nodelist