如何增加javascript中的不透明度？

Question

我希望能够使用

element.style.opacity += 0.1;

或

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

但这不起作用。不透明度不会改变。如果我将不透明度设置为静态值，例如

element.style.opacity = 0.5;

它确实有效。我做错了什么？

Answer 1

element.style.opacity

（假设已定义）将是一个字符串，而不是数字。

"0.1" + 0.1 === "0.10.1"

您可能想要：

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

Answer 2

我突然想到，实际上可以通过字符串因子来降低不透明度，如下所示：

element.style.opacity -= '0.1';

这会工作得很好，但不会相反，因为运算符 += 尝试附加到结果字符串。然而，可以通过这样做来实现增量

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

这将根据需要增加它。

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

属性中定义，则该值似乎不会增加。如果这就是您的 is 定义的地方，那么可能不需要这种方法。

Answer 4

您可能想在 css 中设置关键帧并将 id 或 class 添加到元素

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 ；作为全局的，否则你无法停止计时器！

Answer 5

您也可以使用

.toString();

方法

Answer 6

纯香草 JS，为我工作。每次鼠标悬停在框 (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;
});
};