在 javascript 中使用 classList 迭代元素和切换

Question

Conditions:状况：

Please use javascript and classList property to invert which elements have .highlight class.请使用 javascript 和classList属性来反转哪些元素具有.highlight类。
Basically iterate over all the <li> elements and toggle the class of .highlight .基本上迭代所有<li>元素并切换.highlight的类。 on each one.在每一个上。
You should not alter anything in HTML and CSS.您不应更改 HTML 和 CSS 中的任何内容。

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>

Answer 1

The following solution removes the .highlight class style from the <li> if the .highlight class style is applied to the <li> .如果将.highlight class 样式应用于<li> li> ，则以下解决方案会从<li>中删除.highlight class 样式。 If the .highlight class style is not applied to the <li> element, the .highlight class style is added to the <li> element.如果.highlight class 样式未应用于<li>元素，则.highlight class 样式将添加到<li>元素。

Method-1方法一

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

Method-2方法二

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

Answer 2

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

Answer 3

/ Below is the js !!! /下面是js！！！ / /

const lists = document.querySelectorAll('li');

for (let li of lists ){
  if (li.classList.contains('highlight')) {
    li.classList.remove('highlight');
  }
  else{
    li.classList.add('highlight');
    }
}

Answer 4

const li = document.querySelectorAll('li');

li.forEach(element => element.classList.toggle('highlight'));

在 javascript 中使用 classList 迭代元素和切换

问题描述

4 个解决方案

解决方案1
1 已采纳 2022-02-13 05:35:19

Method-1方法一

Method-2方法二

解决方案2
0 2022-05-06 18:58:50

解决方案3
0 2022-09-04 14:26:35

解决方案4
0 2022-12-19 15:25:07

在 javascript 中使用 classList 迭代元素和切换

问题描述

4 个解决方案

解决方案1 1 已采纳 2022-02-13 05:35:19

Method-1方法一

Method-2方法二

解决方案2 0 2022-05-06 18:58:50

解决方案3 0 2022-09-04 14:26:35

解决方案4 0 2022-12-19 15:25:07

解决方案1
1 已采纳 2022-02-13 05:35:19

解决方案2
0 2022-05-06 18:58:50

解决方案3
0 2022-09-04 14:26:35

解决方案4
0 2022-12-19 15:25:07