Replacing Images based on class using Javascript

Question

I have images all with class attached to them as stage

<img class='stage' src="orange.gif"/> 
<img class='stage' src="yellow.gif"/>

Yellow and Orange look very similar. Is there a way write a Javascript for the console to change all of the orange.gifs into red.gifs. The site doesn't use a jquery library so jquery is off the table?

I have no idea what you are trying to do. Maybe a visual example would help? — Cecilia, Dec 20 '16 at 00:02
by orange.gifs do you mean all occurences of ` - or is it a CSS background-image selected by a CSS selector or an inline style to some element — Jaromanda X, Dec 20 '16 at 00:02

score 0 · Accepted Answer · answered Dec 20 '16 at 00:08

0

using css box-sizing you can do it.!

html

<img class='stage' src="orange.gif"/>

css

.stage{
  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(yellow.gif) no-repeat;
  width: ; /* Width of new image */
  height: ; /* Height of new image */
  padding-left: ; /* Equal to width of new image */
}

https://css-tricks.com/replace-the-image-in-an-img-with-css/

answered Dec 20 '16 at 00:08

Lakshman Kambam

1,498
13
20

or check this, i hope this could help you. http://stackoverflow.com/questions/2182716/is-it-possible-to-set-the-equivalent-of-a-src-attribute-of-an-img-tag-in-css – Lakshman Kambam Dec 20 '16 at 00:14

score 0 · Answer 2 · answered Dec 22 '16 at 11:40

0

You could also use native javascript:

var images = document.querySelectorAll('.stage');

for (var i = 0, len = images.length; i < len; i++) {
    images[i].src = 'red.gif';
}

answered Dec 22 '16 at 11:40

Simser

302
2
10

Replacing Images based on class using Javascript

2 Answers2