How to apply opacity to a DOM element - createImage(); - through a javascript editor?

Question

I’m using P5.js - a javascript library - to capture images from a news API. I would like these images to be superimposed, but with opacity, so that the images merge.

I’m not being able to apply opacity directly by javascript code. I can change the position of the images ( photos.position(x ,y); ), but I can’t find the way to apply opacity.

function setup() {
createCanvas(900,600);
loadJSON("https://newsapi.org....ec6490",gotData); 
}

function gotData(data) {
console.log(data);

var img = data.articles;
var imgs = [];

for (var i = 0; i < img.length; i++) {
imgs.push(img[i].urlToImage);

var fotos = createImg(img[i].urlToImage);

fotos.position(0, 0);
}
}

One solution I found reading some posts here in stackflow, was to manually change the opacity of the images, one by one, through the browser’s HTML inspector, but this is only for a few images.

But this is impossible in the case of 2 thousand images, for example. I need to automate this process.

So how do I apply opacity to an image - direct DOM element by javascript code?

Answer 1

Apparently in your question picture, all the images you add are inside the body, then just add in your CSS the opacity you want that will be applied to all tags <img>, without the need to use Javascript:

<style>
body > img{
   opacity: .3;
}
</style>