Changing element individual style background-color with javascript

Question

Element I want to change

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

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

The error:

Uncaught ReferenceError: Invalid left-hand side in assignment

I don't understand why this is an error. I think it might be because of the - symbol. It works with other styling e.g. document.getElementById('thumb').style.width="10px" works.

Suren Srapyan · Accepted Answer · 2016-06-16 13:09:38Z

3

With dash-ed styles you need to use camelCase. So with

-lowerCase = Uppercase

For Example

background-color : backgroundColor;
font-size : fontSize


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

answered Jun 16, 2016 at 13:09

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mairaj Ahmad · Accepted Answer · 2016-06-16 13:11:11Z

1

Try this

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

answered Jun 16, 2016 at 13:11

Mairaj Ahmad

14.6k2 gold badges29 silver badges43 bronze badges

Comments

Ryan Gavin · Accepted Answer · 2016-06-16 13:18:57Z

1

An alternative way instead of using JavaScript is to use CSS to change the colour of the button on focus.

I have provided an example below I hope it helps.

CSS

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

CSS CLASS: Ensure to include 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>

answered Jun 16, 2016 at 13:18

Ryan Gavin

7291 gold badge8 silver badges23 bronze badges

Collectives™ on Stack Overflow

Changing element individual style background-color with javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related