Question

让我们看看元素数量未知，而我们唯一了解的是它们的类名。

我们要重复更改组的样式（在示例中为a，b或c），在此示例中，我们将使用事件监听器：

window.addEventListener("mousemove", ({ target, y }) => {

  const { tagName, className } = target;

  if (tagName === "DIV") {
    const { top, height } = target.getBoundingClientRect();

    const rgbValue = ((y - top) / height) * 255;
    
    if (className === "a") {
    
      target.style.backgroundColor = `rgb(${rgbValue},255,255)`;
      
    } else if (className === "b") {
    
      document.querySelectorAll(`.${className}`).forEach(elem => {
        elem.style.backgroundColor = `rgb(${Array(2).fill(rgbValue)},255)`;
      });
      
    } else if (className === "c") {
    
      const oldStyleSheet = document.querySelector(`style#${className}`);
      
      if (oldStyleSheet) oldStyleSheet.parentNode.removeChild(oldStyleSheet)
      
      const css = `.${className} { background-color: rgb(${Array(3).fill(rgbValue)}); }`;
      const { head }  = document;
      const styleSheet = document.createElement('style');
      
      styleSheet.appendChild(document.createTextNode(css));
      styleSheet.setAttribute("id", className);

      head.appendChild(styleSheet);
      
    }
  }
})

*{
  position: relative
}

body {
  display: flex;
  height: 100vh;
  flex-wrap: wrap
}
div {
  width: 100px;
  height: 100px;
  margin: 20px;
}

<head></head>
<body>
  <div class="a">A</div>
  <div class="a">A</div>
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="b">B</div>
  <div class="b">B</div>
  <div class="c">C</div>
  <div class="c">C</div>
  <div class="c">C</div>
</body>

在上面的示例中，A仅显示一个元素的预期结果。效果很好，但是我们要调整类的所有元素样式。

B示例获取类的所有元素，并为每个元素调整内联样式。

C示例为每个类创建一个特定的样式表，将其删除（如果存在）并将继续使用，然后创建一个新的样式表。

此处的关键字是个未知数字和重复。如果有很多类且元素较少，则B示例的效果更好；如果有更少的类，则C示例的效果更好，无论使用多少元素。

是否有任何建议或更好的方法的想法？

如何动态更改多个元素的样式？

0 个答案: