Adding a class to img tags using JavaScript

Question

I am a learning javascript guy and I am trying to add the Image Hover Shadow Effect With CSS to my images and for that to work , I have to add an class to all my img tags , which is not possible manually so i am trying to write a javascript that does that and uses jquery , to do so .

it needs to add an class to img tag , such as this

From this

<img border="0"  height="75" src="http://3.bp.blogspot.com/-qhxaAUAJUVQ/TeocW4AuIiI/AAAAAAAABCo/IYy7hQ6-5VQ/s200/CSSEditLogo1.jpg" width="75"/>

to

<img border="0" class="imagedropshadow" height="75" src="http://3.bp.blogspot.com/-qhxaAUAJUVQ/TeocW4AuIiI/AAAAAAAABCo/IYy7hQ6-5VQ/s200/CSSEditLogo1.jpg" width="75"/>

Can anyone help :)

Thanks

user1114 · Accepted Answer · 2011-06-10 09:15:20Z

19

To add the class to all of the images on your page with jQuery:

$("img").addClass("imagedropshadow")

Without jQuery is is not very difficult either:

var images = document.getElementsByTagName("img");
var i;

for(i = 0; i < images.length; i++) {
    images[i].className += " imagedropshadow";
}

answered Jun 10, 2011 at 9:15

user1114

1

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

1 Comment

brandonbradley Over a year ago

The activity of adding the class can be made simpler as follows images[i].classList.add('imagedropshadow');

Emil · Accepted Answer · 2011-06-10 09:14:30Z

2

Are you sure you need the class. If you are planning to add a css class to all images and hook the shadow to it, you should be able to do it on the img tags directly.

img:hover{
 /*properties*/
}

answered Jun 10, 2011 at 9:14

Emil

8,5373 gold badges29 silver badges44 bronze badges

1 Comment

HackToHell Over a year ago

THANKS THIS WORKS .. $("img").addClass("imagedropshadow"); this did not work though :( anyway THANKS !

HddnTHA · Accepted Answer · 2015-08-07 15:40:35Z

2

give an ID to your image, let's say it's imgId and then write this jquery (if you want to add class to any specific img tag.)

$(document).ready(function(){ 
      $('#imgId').addClass('imagedropshadow');
});

for all img tag simply use this;

$("img").addClass("imagedropshadow");

edited Aug 7, 2015 at 15:40

HddnTHA

1,0593 gold badges19 silver badges38 bronze badges

answered Jun 10, 2011 at 9:12

Vivek

11k15 gold badges51 silver badges68 bronze badges

Comments

James Allardice · Accepted Answer · 2011-06-10 09:07:56Z

1

You can use the addClass function with jQuery. See the API here for examples.

answered Jun 10, 2011 at 9:07

James Allardice

166k22 gold badges335 silver badges316 bronze badges

3 Comments

HackToHell Over a year ago

Vivek Over a year ago

place your code inside $(document).ready(function(){ $("img").addClass("imagedropshadow"); });

HackToHell Over a year ago

Thanks img:hover{ /*properties*/ } worked jsfiddle is a gr8 site for debugging THANKS :) @Vivek @James Allardice

Xiezi · Accepted Answer · 2011-06-10 09:15:39Z

1

You can try this:

$('img').addClass('imagedropshadow');

But I suggest you that you add an id or general class into the img tag for selecting.

answered Jun 10, 2011 at 9:15

Xiezi

2,9893 gold badges22 silver badges29 bronze badges

Collectives™ on Stack Overflow

Adding a class to img tags using JavaScript

5 Answers 5

1 Comment

1 Comment

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related