如何增加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

我建議以下，這對於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 demo。

這似乎是必要的，因爲如果opacity尚未在聯機style屬性中定義，值似乎不會增加。如果這是你的是定義那麼這種方法可能不是必要的。

Answer 3

它發生，我認爲你其實可以通過一個字符串係數降低不透明度，如下：

element.style.opacity -= '0.1'; 

這會工作得很好，但是反之則不行，因爲運營商+ =嘗試添加到結果字符串。增量可以通過做

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

這將增加它作爲想要的。

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;作爲全球，否則你不能停止計時器！

Answer 5

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