How to set CSS class property in Javascript?

Question

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?

Does this answer your question? How can I change an element's class with JavaScript? — aekit
– aekit, Commented Dec 2, 2021 at 7:52

aleks korovin · Accepted Answer · 2021-12-02 07:29:12Z

0

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

answered Dec 2, 2021 at 7:29

aleks korovin

7444 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Christian Eduardo Over a year ago

I'm trying change one property of this class, not add/remove classes

Todor Markov · Accepted Answer · 2021-12-02 07:41:09Z

0

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 ..

edited Dec 2, 2021 at 7:41

answered Dec 2, 2021 at 7:33

Todor Markov

5175 silver badges12 bronze badges

2 Comments

Christian Eduardo Over a year ago

I'm looking for a solution without use iteration

aleks korovin Over a year ago

You can add a new rule then, please check that - stackoverflow.com/questions/56824866/…

Anas Hassan · Accepted Answer · 2021-12-02 07:48:56Z

0

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>

answered Dec 2, 2021 at 7:48

Anas Hassan

615 bronze badges

2 Comments

Christian Eduardo Over a year ago

I'm using pure javascript and looking for a solution without use iteration

Anas Hassan Over a year ago

@ChristianEduardo The solution is: make a class in your CSS file that implements your desired style. then use this JS code to implement it on your page:elementName.classList.add("THE CLASS NAME")

Collectives™ on Stack Overflow

How to set CSS class property in Javascript?

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related