How can I dynamically update a HTML attribute

Question

I have this code

<div class="g-popupgrid-item g-zoom" data-size="395x385">

I want to populate the 395x385 dynamically with the image size.

I have a JS function which gets the image size, I don't know how to print/echo/document.write it to be within the HTML tag.

you won't print/echo/document.write. you use DOM and .setAttribute() in jquery. it's as simple as $('.g-popupgrid-item .g-zoom').attr('data-size', var_with_value_you_want) — Marc B
– Marc B, Commented Jul 26, 2016 at 19:22
And of course, you can do this without jQuery: document.querySelector("g-popupgrid-item g-zoom").setAttribute("data-size", your_value_here); — SimianAngel
– SimianAngel, Commented Jul 26, 2016 at 19:26

Damon · Accepted Answer · 2016-07-26 19:29:36Z

2

I would avoid using jQuery for such a trivial task unless you are already using it in your project. Plain javascript:

var div = document.querySelector('.g-popupgrid-item');
var newSize = '100x100'; // for example
div.setAttribue('data-size', newSize);

answered Jul 26, 2016 at 19:29

Damon

4,3562 gold badges19 silver badges27 bronze badges

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

1 Comment

Patrick Evans Over a year ago

or using dataset in compatible browsers div.dataset.size = newSize

bren · Accepted Answer · 2016-07-27 19:25:49Z

2

Get the Node using JavaScript, then modify it to fit your needs:

var container = document.querySelector(".g-popupgrid-item .g-zoom")
container.setAttribute("data-size", value)

Keep in mind this will only affect the first element with those classes, if you want affect them all, use the code below:

var containers = document.querySelectorAll(".g-popupgrid-item .g-zoom")
containers.forEach(function(container) {
  container.setAttribute("data-size", value)
})

Also keep in mind that containers is not an Array it's a NodeList. Read more here

EDIT: According to @Eoin, the .forEach() method on NodeLists is not supported in Firefox. You can also use a standard for loop in place of it:

var containers = document.querySelectorAll(".g-popupgrid-item .g-zoom")
for (var i = 0; i < containers.length; i++) {
  containers[i].setAttribute("data-size", value)
}

edited Jul 27, 2016 at 19:25

answered Jul 26, 2016 at 19:32

bren

4,3603 gold badges30 silver badges46 bronze badges

7 Comments

Damon Over a year ago

You point out a nice feature of returning a NodeList rather than the HTMLCollection that getElementsByClassName produces - the forEach method. You don't need to recast as an array.

bren Over a year ago

@Damon I just read a bunch about the differences between NodeList and HTMLCollection, because it was one of the things that I really didn't understand about browser js. Good timing on @Eoin 's part, though

Eoin Over a year ago

I have tried to implement it but now I'm getting an error TypeError: containers.forEach is not a function here's my full code

Eoin Over a year ago

<script> 	var images = document.getElementsByClassName("image");  	for (var i = 0; i < images.length; ++i) {   	    images[i].addEventListener("load", (event) => { 	    var image = event.target; 	    image.dataset.size = image.naturalWidth + "x" + image.naturalHeight; 	    console.log(image.dataset.size); 	  });//works at this point, then I add the next part 	  	var containers = document.querySelectorAll(".g-popupgrid-item .g-zoom"); 		containers.forEach(function(container) { 		container.setAttribute("data-size", image.dataset.size); 		});	  	}	   </script>

bren Over a year ago

@Eoin it's an issue of browser compatability. You can also use a standard for loop, which will work in Firefox

|

Collectives™ on Stack Overflow

How can I dynamically update a HTML attribute

2 Answers 2

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related