2013-03-15 1 views
1

我只是簡單地改變當我點擊它時更改按鈕的colorbackground-color爲什麼更改通過JavaScript的樣式會受到CSS轉換的影響

<input type="button" value="click me" id="myButton" onclick="ChangeColor()"/> 

這個按鈕的CSS包含了colorbackground-color CSS過渡,但是,我並沒有添加任何樣式:hover僞元素上,我並沒有改變顏色。

#myButton{ 
    color:#3399FF; 
    background-color:#FFFFFF; 
    /* These transitions are supposed to change the color in case I hover over the button */ 
    -webkit-transition: background 0.5s,color 0.5s; 
     -moz-transition: background 0.5s,color 0.5s; 
      transition: background 0.5s,color 0.5s; 
} 
#myButton:hover{ 
    /* But since there's nothing here, the color won't change when I hover */ 
} 

現在,當我通過JavaScript改變風格,他們改變而使用的過渡,意味着,它的顏色會0.5s後更改,而不是瞬間。

function ChangeColor() 
{ 
    document.getElementById("myButton").style.color = "#FFFFFF"; 
    document.getElementById("myButton").style.backgroundColor = "#3399FF"; 
} 

這真是一件好事,我喜歡它,但我只是想知道,JavaScript如何尊重CSS3轉換?有沒有這方面的文件?

+0

'CSS3' transitions本來就是我認爲的瀏覽器支持的。 – 2013-03-15 23:47:17

回答

3

只要屬性的值發生更改,就會應用您的轉換。無論您是通過懸停,焦點還是調整大小(例如使用媒體查詢),單擊或通過JavaScript執行其他任何事件,都無所謂。

一般而言,您在元素的兩個狀態之間有一個轉換。您首先確定其初始狀態:當您更改任這兩個屬性的值(並不要緊,你是否做到這一點使用的:hover僞類或JavaScript)

#myButton { 
    color: #39f; 
    background: #fff; 
    transition: .5s; 
} 

,你的元素會進入另一個狀態,並且您將在來自初始狀態和來自這個新狀態的屬性值之間進行轉換。

2

您用於使用JavaScript更改樣式的方法基本上是直接在元素本身上手動更改style屬性的一種方法。任何時候樣式都會變成其他東西,並且您爲其定義了一個轉換,那麼該轉換將會激活以更改爲新樣式。這包括JavaScript對樣式所做的更改。

相關問題