Question

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

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

＆＃13;

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

＆＃13;

ul {
    font-size: 1.4em;
    list-style: none;
    }

ul li a {
    text-decoration: none;
    color: #e69b1e;
    }

＆＃13;

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

＆＃13;

理想情况下，我希望将自己的JavaScript样式放在自己的变量中并将其循环到＆＃34; menuItem＆＃34;虽然没有影响任何其他预定义的类，但是我不太确定如何将该变量称为循环。

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中获取该类的背景颜色

＆＃13;

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

＆＃13;

ul {
  font-size: 1.4em;
  list-style: none;
}

ul li a {
  text-decoration: none;
  color: #e69b1e;
}

＆＃13;

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

＆＃13;

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

2 个答案: