在javascript中減去不透明度

這可能是一個愚蠢的問題，但我無法讓這個超級簡單的腳本工作。我需要一個按鈕來減少.1的不透明度。每次點擊。在javascript中減去不透明度

我試過所有這些。

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;

我希望回答這個問題有些事情要與缺乏運營商的理解。但我已經看過了大量的算術教程，它們看起來都充滿了對我來說工作得很好的整數例子。我甚至複製粘貼他們中的一些，並改變了數字，以發現他們停止工作。我很抱歉，如果這是一個noob問題（我確信它是）。謝謝

來源

2012-05-17 ojcruz

作爲一個側面說明，你還不明白的語句。例如「十/十;」完全沒有。 – Blindy

謝謝。在那個筆記上。我有點絕望。我開始嘗試隨意組合任何事物。是的，有些人似乎很無意義。 – ojcruz

當我測試時，你必須先設置不透明度，然後你可以閱讀它來改變它。

<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 :)

來源

2012-05-17 16:29:54

謝謝。這似乎是我在爲錯誤尋找錯誤的地方。 – ojcruz

不客氣，我不知道如何解釋爲什麼（我搜索了一下），但我看到'document.getElementById'更廣泛地用於通過ID訪問元素。還有jQuery :) –

@ojcruz我只是想到，如果添加到opacity中，您需要使用parseFloat，因爲讀取css會返回一個字符串，並將字符串+數字連接成一個clumps字符串。 –

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

爲什麼這麼難？

來源

2012-05-17 16:26:51 OptimusCrime

我想要注意的是，所有的CSS屬性都暴露給Javascript作爲字符串，所以這是*幾乎*正確的解決方案（應該是''parseFloat''，而不是''parseInt''） –

嗨。謝謝你，但這些都不起作用。 – ojcruz

我想你的意思是parseFloat（） –

它不起作用，因爲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; 
    } 
};

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

來源

2012-05-17 16:31:38

我在Safari和Firefox上測試過。我正在使用Dreanweaver。這不是最好的答案。如果我的問題很愚蠢，我很抱歉。看來問題在於將不透明度設置爲內聯樣式。從一個CSS表呼叫是問題。 – ojcruz

答案不是諷刺或者其他的，如果你錯誤地採用了它，對不起。 –

我編輯回答你的問題。 jsfiddle的url是一樣的。 –

在javascript中減去不透明度

回答

相關問題