如何在JavaScript中增加不透明度？

Question

我希望能够使用

element.style.opacity += 0.1;

或者

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

但是这种方法不起作用。透明度没有改变。如果我将不透明度设置为静态值，例如：

element.style.opacity = 0.5;

它确实可以工作。我做错了什么吗？

- msbg

---

想知道为什么这个被评为负分？ - msbg

Answer 1

< p > element.style.opacity （如果有定义）将是一个字符串，而不是一个数字。

（假设它完全被定义）

"0.1" + 0.1 === "0.10.1"

您可能想要：

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

- Quentin

Answer 2

我想提醒您，实际上可以通过以下方式以字符串因素减少不透明度：

element.style.opacity -= '0.1';

这样做是可行的，但反过来就不行，因为操作符+=试图将内容追加到结果字符串中。然而，可以通过执行以下操作来实现增量：

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

这将按照所需的方式递增它。

- UncleSaam

Answer 3

我建议采用以下方式，如果opacity没有预定义的值，则为其分配一个预定义值：

// 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演示。

这似乎是必要的，因为如果opacity没有在内联style属性中定义，则该值似乎不会增加。如果您的opacity已在其中定义，则可能不需要采用此方法。

- David Thomas

Answer 4

你可能想在CSS中设置关键帧并将ID或类添加到元素中。

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;}
}

唯一的缺点是： - 您必须为所有浏览器设置关键帧。 - 在移动设备上，它需要大量的功率，这意味着您的页面变得无法触摸或单击。并且使同时使用多个关键帧变得困难。

或者

尝试在JavaScript中创建一个函数，并将此代码放入其中：

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;
}

使用计时器启动此函数，您将获得一个不透明度，在其值为0.0时停止。 不要忘记将var TimerName;放置为全局变量，否则您无法停止计时器！

- Mr.YellowMan

Answer 5

你也可以使用 .toString(); 方法

- Kris