更改元素的个人风格背景色用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>