更改元素的個人風格背景色用JavaScript

Question

元我想改變

<button id="thumb" onfocus="focus()" style="height: 12px; width: 12px; background-color: white; border-radius: 50%; margin: 0 auto; position: relative; top: -3px; left: 50%; box-shadow: 0px 0px 3px #888888;"> 
</button> 

函數調用：

function focus() { 
    document.getElementById('thumb').style.background-color="blue"; 
} 

錯誤：

Uncaught ReferenceError: Invalid left-hand side in assignment

我不理解爲什麼這是一個錯誤。我想這可能是因爲-這個符號。它適用於其他造型，例如document.getElementById('thumb').style.width="10px"的作品。

Answer 1

使用破折號風格，您需要使用駝峯。 因此，與

-lowerCase = Uppercase 

對於實例

background-color : backgroundColor; 
font-size : fontSize 


function focus() { 
    document.getElementById('thumb').style.backgroundColor="blue"; 
} 

Answer 2

試試這個

document.getElementById('thumb').style.backgroundColor="blue"; 

Answer 3

的另一種方式，而不是使用的JavaScript是使用CSS來改變焦點的按鈕的顏色。

我在下面提供了一個例子，我希望它有幫助。

CSS

.item-input:focus { 
    background-color: blue; 
} 

CSS CLASS：確保爲包括類= 「項目輸入」

<button id="thumb" class="item-input" onfocus="focus()" style="height: 12px; width: 12px; background-color: white; border-radius: 50%; margin: 0 auto; position: relative; top: -3px; left: 50%; box-shadow: 0px 0px 3px #888888;"> 
</button>