I would expect to be able to use

element.style.opacity += 0.1;

or

element.style.opacity = element.style.opacity + 0.1;

but this does not work. The opacity does not change. If I set the opacity to a static value, like

element.style.opacity = 0.5;

it does work. What am I doing wrong?

I would expect to be able to use

element.style.opacity += 0.1;

or

element.style.opacity = element.style.opacity + 0.1;

but this does not work. The opacity does not change. If I set the opacity to a static value, like

element.style.opacity = 0.5;

it does work. What am I doing wrong?

• javascript
• opacity

• 1 Curious as to why this is being rated down? – msbg Commented Sep 29, 2012 at 0:43

6 Answers 6

element.style.opacity (assuming it is defined at all) will be a String, not a Number.

"0.1" + 0.1 === "0.10.1"

You probably want:

element.style.opacity = parseFloat(element.style.opacity) + 0.1;

It occurred to me that you can actually decrease the opacity by a string factor, as following:

element.style.opacity -= '0.1';

And that will work just fine, but not the opposite since the operator += tries to append to the resulting string. Increment can however be achieved by doing

element.style.opacity -= '-0.1';

Which will increment it as wanted.

I'd suggest the following, which assigns a predefined value for opacity if it's not already defined:

// using a simple onclick for demo purposes
t.onclick = function(){
    var opacity = this.style.opacity;
    this.style.opacity = opacity ? (parseFloat(opacity) + 0.1) : 0.2;
};​​​

JS Fiddle demo.

This seems to be necessary because the value doesn't seem to be incremented if the opacity isn't already defined in the in-line style attribute. If that's where yours is defined then this approach may not be necessary.

You might want to make keyframes setup in css and add the id or class to the element

Example for calling a keyframe:
.myElement{
position:absolute;
background:blue;
-webkit-animation:KeyframeName 1s linear infinite;
}

Example for a keyframe:
@-webkit-keyframes KeyframeName {
0%{style code here, example: opacity:1;}
100%{style code here, example: opacity:0;}
}

The only down sides are: - you have to make a keyframe setup for all browsers. - on mobile devices it takes alot of power, meaning you page bees un-touchable or onclickable. And makes it hard to use many keyframes at once.

Or

Try making a function in javascript and put this code in it:

var OpacityValue = 1;
function OpacityChange(){
    if(OpacityValue == 0.0){
        Opacity = 0.0;
        clearInterval(TimerName);
     }
     else if(OpacityValue > 0){
        OpacityValue += -0.1;
     }
     yourElement.style.opacity = OpacityValue;
}

Launch this function with a timer an you got you opacity that will stop when its at a value of 0.0 Don't forget to place a var TimerName ; as global, otherwise you cant stop the timer!

You can use also .toString(); method

Pure vanilla JS, worked for me. This function changes opacity every time mouse hovers over the box (div).

let div;

function changeOpacity(){
    let defaultOpacity = 0.1;
    div.addEventListener('mouseenter', function(){
        this.style.backgroundColor = currentColor.value;
        defaultOpacity += 0.1;
        this.style.opacity = defaultOpacity;
});
};