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

Question

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

Navigation

#1 by (0 votes)

3

I'm using p5.js - a javascript library - to capture images from a news API. I would like these images to be superimposed, but opaque, so that the images blend.

I'm not able to apply direct opacity to the javascript code. I can change the position of the images (photos.position (x, y);), but I can not 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 by reading some posts here in stackflow was manually changing the opacity of the images one by one through the HTML browser inspector, but this is only for a few images.

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

So, how do I apply opacity in an image - DOM element directly through the javascript code?

javascript html html5 dom web-scraping

asked by anonymous 22.06.2018 / 13:36

1 answer

Doubts about branch structure and repositories Ajax function for MVC controller

score 0 · Accepted Answer

As seen in your question image, all the images you add are within body , so simply add in your CSS the opacity you want to apply to all <img> tags without the need to use JavaScript:

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