How to do mutiple css class in one line javascript code

Question

I have css class names - .exp-1 , .exp-2, .exp-3 , exp-4 ... so is there any simple way to write these all in onlike line like ,I m beginner to javascript

document.getElementsByClassName("exp-1")[0];
document.getElementsByClassName("exp-2")[0];
document.getElementsByClassName("exp-3")[0];
document.getElementsByClassName("exp-4")[0];

to

 document.getElementsByClassName("exp-1,exp-2,exp-3, exp-4")[0];

Give them all the same class name? It would be the point of a classname? Elements can have multiple class names... or just simply use .querySelector() — NewToJS
– NewToJS, Commented Nov 8, 2016 at 11:29
You might want to update the question ; you seem to be asking 'How to access multiple classes', not how to do/create. — Alex
– Alex, Commented Nov 8, 2016 at 11:32

Mohit Bhardwaj · Accepted Answer · 2016-11-08 11:32:10Z

10

You can use querySelector and then use css like selectors. It returns the first element of all selected elements. If you want to return all you can use querySelectorAll

 document.querySelector(".exp-1,.exp-2,.exp-3,.exp-4");

edited Nov 8, 2016 at 11:32

answered Nov 8, 2016 at 11:30

Mohit Bhardwaj

10.1k7 gold badges41 silver badges66 bronze badges

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

2 Comments

Abhinash Majhi Over a year ago

thanks bro and how to put them in common line like (" .exp (1-2-3-4))"

Mohit Bhardwaj Over a year ago

Welcome :) . If you want to use a single selector for all these classes, you should prefer using attribute selectors (developer.mozilla.org/en/docs/Web/CSS/Attribute_selectors) as mentioned in @Rajesh's answer.

Rajesh Dixit · Accepted Answer · 2016-11-08 11:31:43Z

8

You can use starts with selector

document.querySelectorAll('[class^=exp-]')

Sample

Array.from(document.querySelectorAll('[class^=t]'), function(el) {
  console.log(el.innerHTML)
})

<div class="t1">1</div>
<div class="t2">2</div>
<div class="t3">3</div>
<div class="t4">4</div>

answered Nov 8, 2016 at 11:31

Rajesh Dixit

25k5 gold badges52 silver badges86 bronze badges

1 Comment

Rajesh Dixit Over a year ago

At least comment if something is wrong/missing. Revenge votes never help anyone.

Collectives™ on Stack Overflow

How to do mutiple css class in one line javascript code

2 Answers 2

2 Comments

Sample

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Sample

1 Comment

Related