Comment faire une boucle sur une nodelist JavaScript et appliquer un style JavaScript?

Question

Comment puis-je obtenir la boucle JavaScript associée à la variable liList pour que le DOM ne prévale pas les autres styles?

Je souhaite que mes éléments de menu soient toujours orange et que le premier élément de liste contienne la variable styleAbbr créée en JavaScript.

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

Idéalement je voudrais avoir mon style JavaScript dans sa propre variable et boucle dans la « ligneMenu » classe tout en ne réalisant aucune autre cependant de classe prédéfinie, je ne suis pas tout à fait sûr que je appellerait cette variable dans une boucle. Je suis également conscient que je pourrais avoir une classe dans mon CSS faire tout cela et ensuite faire référence à cela.
Cependant, je suis intéressé comment cela peut être réalisé en JavaScript.
Merci.

Answer 1

J'ai trouvé une solution pour référencer mon style 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

Je réponds comment ajouter la classe à chaque élément li créé dynamiquement sans affecter prédéfini. Donc, créer la classe en fonction de l'élément de menu innerText et prendre la couleur d'arrière-plan pour la classe de tableau défini 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>