How to set CSS class property in Javascript?-CodePudding

I'm trying change CSS class property value. I'm using this soluction:

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

Anyone has a solution without use iteration?

CodePudding user response：

It's better to use classList API with possibility to add, remove or toggle CSS classes: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

CodePudding user response：

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

jsfiddle

EDIT: Please describe exactly where you want to use it. If you do not want to change the property of any event it is unnecessary to do with JS. You can overwrite css or add a new class ..

CodePudding user response：

if your using pure JavaScript You can use this code:

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

or if you are using JQuery you can use this:

$(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>