add style with javascript to each element

Question

I want add class to my div but I have so many div and any time clicked button just add or remove on one div in html how can I do? is there any way to use value or id? such as that link in command

if you lock i have to button to show&hide dive but no matter which one is clicked it's just add class to first one

https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do — traktor, Apr 22 '22 at 09:38

score 0 · Answer 1 · answered Apr 22 '22 at 09:23

0

You can have many divs with the same class but if your looking to do something more specific to a particular div you have to use id or a seperate class. Read more about CSS selectors

<div class="blue" id="standout">Hello world</div>
<div class="blue">Hello world</div>
<div class="blue">Hello world</div>
<div class="blue">Hello world</div>

.blue{
text-align: center;
}

 #standout{
text-overflow: ellipsis;
 }

answered Apr 22 '22 at 09:23

Dimeji Ogunleye

11
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 22 '22 at 09:59

score 0 · Answer 2 · answered Apr 22 '22 at 09:26

Add a class (or id) to the button like this:

<button class="foo-class" id="foo-id">Click me</button>

And then you can access the click on the button with the following javascript:

// class
document.querySelector('.foo-class').click(
  // do something
);

// id 
document.getElementById("foo-id").click(
   // do something
);

See here for reference the id and here the reference for class.

Simone Rossaini · Accepted Answer · 2022-04-22T09:38:03.730

If you mean for toggle class slow you can use e.target with next() for toggle element like:

$('.toggle').click(function(e) {
    $(e.target).next().toggle('slow');
});

body {padding:30px;}

#target {
  background:#0099cc;
  width:300px;
  height:300px;
  height:160px;
  padding:5px;
  display:none;
}

.Hide
{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="toggle">Show &amp; Hide</button>
<div>
  <p>test1</p>
</div>
  
</div>
<div>
  <button class="toggle">Show &amp; Hide</button>
<div>
  <p>test2</p>
</div>
</div>

Or you can use data-target like:

$('.toggle').click(function(e) {
    $('#'+ e.target.dataset.target).toggle('slow');
});

body {padding:30px;}

.target {
  background:#0099cc;
  width:300px;
  height:300px;
  height:160px;
  padding:5px;
  display:none;
}

.Hide
{
  display:none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<button class="toggle" data-target="target-1">Show &amp; Hide</button>
<div id="target-1" class="target">
  <p>test1</p>
</div>
  
</div>
<div>
  <button class="toggle" data-target="target-2">Show &amp; Hide</button>
<div id="target-2" class="target">
  <p>test2</p>
</div>
</div>

Another rule you must learn, id must be unique.

Reference:

tnx this is any thing i search it – reza er Apr 22 '22 at 09:47 — reza er, Apr 22 '22 at 09:47

add style with javascript to each element

3 Answers3