I know how to set it in a style sheet. This explains how to get it using JS...

I tried this to set it:

window.getComputedStyle( myEl ).setPropertyValue( 'opacity', 0.7 );

and got

setPropertyValue is not a function.

Obviously I can use JQuery css( ... )... in the min.js file I found there were no fewer than 10 matches for opacity. I didn't have a clue about what was going on.

This is Firefox, by the way.

I know how to set it in a style sheet. This explains how to get it using JS...

I tried this to set it:

window.getComputedStyle( myEl ).setPropertyValue( 'opacity', 0.7 );

and got

setPropertyValue is not a function.

Obviously I can use JQuery css( ... )... in the min.js file I found there were no fewer than 10 matches for opacity. I didn't have a clue about what was going on.

This is Firefox, by the way.

• javascript
• firefox
• opacity

2 Answers 2

By modifying the style property.

myEl.style.opacity = 0.7;

Here is the live example for opacity change:

var target = document.getElementById('target');
var currentOpacity = window.getComputedStyle(target).opacity;

function decreaseOpacity() {
  if (currentOpacity > 0) {
    target.style.opacity = currentOpacity - 0.1;
    currentOpacity -= 0.1;
  }
}

function increaseOpacity() {
  if (currentOpacity < 1) {
    target.style.opacity = currentOpacity - 0.1;
    currentOpacity += 0.1;
  }
}

#target {
  width: 100px;
  height: 100px;
  background-color: violet;
  opacity: 1;
}

<div id="target"></div>
<button onclick="decreaseOpacity()">Decrease opacity</button>
<button onclick="increaseOpacity()">Increase opacity</button>