Conditions:
classList property to invert which elements have .highlight class.<li> elements and toggle the class of .highlight.
on each one.Your result should be like this!
/* app.js */
let list = document.querySelector('li');
list.classList.add('');/* index.css */
/*No need to touch anything in this file:*/
li {
background-color: #B10DC9;
}
.highlight {
background-color: #7FDBFF;
}<!-- index.html -->
<!DOCTYPE html>
<head>
<title>ClasList</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="index.css">
<!--LEAVE THIS FILE ALONE!-->
<ul>
<li>Hello</li>
<li class="highlight">Hello</li>
<li>Hello</li>
<li>Hello</li>
<li class="highlight">Hello</li>
<li>Hello</li>
</ul>
<script src="app.js"></script>
</body>
</html>The following solution removes the .highlight class style from the <li> if the .highlight class style is applied to the <li>. If the .highlight class style is not applied to the <li> element, the .highlight class style is added to the <li> element.
/* The querySelectorAll() method is used to select all <li> elements. */
let list = document.querySelectorAll('li');
var listArray = [...list];
/* Each <li> element is checked using the forEach() method. */
listArray.forEach(element => {
/* Is the ".highlight" class style applied to the <li> element? */
if(element.classList.contains("highlight")) {
/* Remove the ".highlight" class style from the <li> element. */
element.classList.remove("highlight");
}
else {
/* Add the class style ".highlight" to the <li> element. */
element.classList.add("highlight");
}
});li {
background-color: #B10DC9;
}
.highlight {
background-color: #7FDBFF;
}<!DOCTYPE html>
<head>
<title>ClasList</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<ul>
<li>Hello</li>
<li class="highlight">Hello</li>
<li>Hello</li>
<li>Hello</li>
<li class="highlight">Hello</li>
<li>Hello</li>
</ul>
<script src="app.js"></script>
</body>
</html>/* The querySelectorAll() method is used to select all <li> elements. */
let list = document.querySelectorAll('li');
window.addEventListener('load', (event) => {
for(let i = 0 ; i < list.length ; ++i) {
if(list[i].classList.contains("highlight"))
list[i].classList.remove("highlight");
else
list[i].classList.add("highlight");
}
});li {
background-color: #B10DC9;
}
.highlight {
background-color: #7FDBFF;
}<!DOCTYPE html>
<head>
<title>ClasList</title>
<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<ul>
<li>Hello</li>
<li class="highlight">Hello</li>
<li>Hello</li>
<li>Hello</li>
<li class="highlight">Hello</li>
<li>Hello</li>
</ul>
<script src="app.js"></script>
</body>
</html>/* The querySelectorAll() method is used to select all <li> elements. */
const li= document.querySelectorAll('li');
for(let i of li) {
i.classList.toggle("highlight");
}li {
background-color: #B10DC9;
}
.highlight {
background-color: #7FDBFF;
}<!DOCTYPE html>
<head>
<title>ClasList</title>
<script src="node_modules/babel-polyfill/dist/polyfill.js" type="text/javascript"> </script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<ul>
<li>Hello</li>
<li class="highlight">Hello</li>
<li>Hello</li>
<li>Hello</li>
<li class="highlight">Hello</li>
<li>Hello</li>
</ul>
</body>
</html>