如何在 Javascript 中设置 CSS 类属性？答案

【问题标题】：How to set CSS class property in Javascript?如何在 Javascript 中设置 CSS 类属性？
【发布时间】：2022-01-08 17:05:29
【问题描述】：

我正在尝试更改 CSS 类属性值。我正在使用这个解决方案：

let pizzas = document.querySelectorAll('.pizza');
pizzas.forEach( pizzaElement => pizzaElement.style.display = 'none' );

谁有不使用迭代的解决方案？

【问题讨论】：

这能回答你的问题吗？ How can I change an element's class with JavaScript?

标签： javascript css class properties

【解决方案1】：

最好使用classList API，可以添加、删除或切换 CSS 类：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

【讨论】：

我正在尝试更改此类的一个属性，而不是添加/删除类

【解决方案2】：

let pizzas = document.querySelectorAll('.pizza');
 
pizzas.forEach( pizzaElement => pizzaElement.classList.add('d-none') );

jsfiddle

编辑： 请准确描述您想在哪里使用它。如果您不想更改任何事件的属性，则无需使用 JS。您可以覆盖 css 或添加新类..

【讨论】：

我正在寻找不使用迭代的解决方案
您可以添加新规则，请检查 - stackoverflow.com/questions/56824866/…

【解决方案3】：

如果你使用纯 JavaScript 你可以使用这个代码：

let pizzas = document.querySelectorAll('.pizza');
pizzas[0].style.display = 'none';
pizzas[1].style.display = 'none';
pizzas[2].style.display = 'none';

或者如果你使用的是 JQuery，你可以使用这个：

$(document).ready(function(){

   $('.pizza').css('display','none');

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<DOCTYPE html>

  <head>
  </head>

  <body>
    <div class="pizza">Some Text</div>
    <div class="pizza">Some Other Text</div>
    <div class="pizza">Text</div>
  </body>

  </html>

【讨论】：

我正在使用纯 javascript，正在寻找不使用迭代的解决方案
@ChristianEduardo 解决方案是：在您的 CSS 文件中创建一个实现所需样式的类。然后使用这个JS代码在你的页面上实现它：elementName.classList.add("THE CLASS NAME")