使用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

對於虛線樣式，您需要使用camelCase 。 所以用

-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：確保包含class =“ item-input”

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