Change attribute from data-src to src WITHOUT jQuery

Question

I am building a lightbox, in pure JavaScript. I currently have my images loading via AJAX, but i know it is easier to just have the img data-src attribute being replaced onclick to src.

I however have NO idea how this is done in pure JavaScript, by that i mean, without using any libraries.

Can anyone tell me how this is done?

to sum up: How do i change ex:

<img data-src="URL"/>

to:

<img src="URL"/>

without jQuery.

Just wanted to make a listner for a click. But i got the answer now below :) — Kristian Daugaard
– Kristian Daugaard, Commented Oct 12, 2013 at 11:42

Harry · Accepted Answer · 2013-10-12 11:33:08Z

14

You can do it like shown below:

var imgEl = document.getElementsByTagName('img');
for (var i=0; i<imgEl.length; i++) {
    if(imgEl[i].getAttribute('data-src')) {
       imgEl[i].setAttribute('src',imgEl[i].getAttribute('data-src'));
       imgEl[i].removeAttribute('data-src'); //use only if you need to remove data-src attribute after setting src
    }
}

The above code will fetch all img tags, check if they have a data-src attribute and if present, replace it with src.

Demo Fiddle

answered Oct 12, 2013 at 11:33

Harry

90.1k26 gold badges216 silver badges224 bronze badges

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

Comments

MrCode · Accepted Answer · 2013-10-12 11:30:08Z

7

Get a handle on the image element, and then set it's src property, using the value from getAttribute().

Plain Javascript doesn't have any helper functions to handle data-* attributes, it just treats them as any other attribute.

var img = document.getElementById("myimg");
img.src = img.getAttribute("data-src");

answered Oct 12, 2013 at 11:30

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Comments

Hien Nguyen · Accepted Answer · 2019-07-04 00:42:11Z

2

You can use forEach with querySelectorAll

var imageElements = document.querySelectorAll('img');
   
imageElements.forEach(c=> c.setAttribute('src',c.getAttribute('data-src')));

img{width:100px;}

<img data-src='https://cdn4.iconfinder.com/data/icons/nature-20/512/79-512.png' />

answered Jul 4, 2019 at 0:42

Hien Nguyen

19k7 gold badges57 silver badges70 bronze badges

Collectives™ on Stack Overflow

Change attribute from data-src to src WITHOUT jQuery

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related