减去 JavaScript 中的不透明度

Subtracting opacity in javascript

本文关键字：不透明度 JavaScript 减去      更新时间：2023-09-26

这可能是一个愚蠢的问题，但我无法让这个超级简单的脚本工作。我需要一个按钮，可以将不透明度降低 .1。每次点击时。

我已经尝试了所有这些。 

x.style.opacity-.3; //This doesn't work. Doesn't do anything.
x.style.opacity=.3; //This gives me an opacity of .3. 
x.style.opacity-=.3; //This gives an opacity of 0. Why?
x.style.opacity--; //This will give opacity of 0 as expected.

我什至尝试过这个：

var timesTen = x.style.opacity*10;
timesTen--;
timeTen/10;
x.style.opacity=timesTen; // This gives opacity of 0;

我希望这个问题的答案与缺乏对运营商的理解有关。但是我已经看了大量的算术教程，它们似乎都充满了整数示例，对我来说效果很好。我什至复制粘贴了其中一些并更改了数字，只是发现它们停止工作。如果这是一个菜鸟问题，我很抱歉(我确信是(。谢谢

当我测试时，您必须先设置不透明度，然后您可以读取它来更改它。

​<div id="x" style="opacity:1.0">Hello</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

​x.style.opacity -= 0.3;

因为以上不是标准的一部分(在 Firefox 中也不起作用(，所以写如下：

document.getElementById("x").style.opacity -= 0.3;

在增加不透明度的情况下，parseFloat是必要的，因为否则会发生字符串连接。或者写-= -0.3 :)

x.style.opacity = parseFloat(x.style.opacity) - 0.1;

为什么这么难？

它

不起作用，因为此时 x.style.opacity 属性不存在，它只是由于 css 而应用。解决方法如下：

.HTML：

<div id="t" style="background: black; opacity: 1;">Hello</div>
<div id="c" style="background: black;">Hello</div>

.JS：

document.getElementById( 't' ).onclick = function() {
    // This works
    this.style.opacity = this.style.opacity - 0.1;
};
document.getElementById( 'c' ).onclick = function() {
    var opacity = this.style.opacity;
    // If the property exists, just decrement it
    if ( opacity ) {
        opacity -= 0.1;
    }
    // Else, set it (it will only be set once)
    else {
        opacity = 0.9;
    }
};

演示：http://jsfiddle.net/Ralt/xDFBY/

相关文章：