How to implement dynamic style on HTML elements (leaflet map markers)?

I am working on a leaflet based map.

The map has a bunch of markers which are mostly being drawn with PNG images, though some use FontAwersome SVG icons. Different types of thing use different icons.

These markers represent things that can be found in a game, so you can toggle whether a marker is found or not found (right click on a marker).

When a user toggle's this propery I add 'found' to the corresponding marker's classList, and the site's main.css contains:

.found { opacity: 30%; }

The code looks something like this:

// Add 'found' to all markers matching 'alt' var divs = document.querySelectorAll('*[alt="' + this.alt + '"]'); [].forEach.call(divs, function (div) { if(setFound) div.classList.add('found'); else div.classList.remove('found'); });

So when you toggle the found property the markers change appearance.

I want to be able to allow the user to dynamically change the opacity of all 'found' markers with a setting/control. Allowing them to hide found things completely or change the amount of opacity to more solid.

Later I will likely want to add some other exclusive states ( notfindable and notfound) so the way these are drawn can be varied too.

My instinct is to somehow change the .found style's opacity and all the objects using it then update, but I can't seem to find an explanation of how to do that. It seems like I could use a custom property variable for opacity and but I haven't found a way to change them dynamically either.

How can I change a style dynamically so that all objects that share the subclass on my site reflect the change? Is there a better way to approach the problem?

I'd rather not use jquery as I find it tends to obscure my understanding of what's going on.