Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM (Retiring) The Browser Environment Thinking Globally

Devjyoti Ghosh
Devjyoti Ghosh
2,422 Points

Why backgroundColor?

Why is the property to change that background color in JavaScript backgroundColor instead of background-color used in CSS?

2 Answers

Michael Hulet
Michael Hulet
47,842 Points

It's conventional in JavaScript to write variable and function names likeThis. Perhaps more importantly, however, the - character in function and variable names is not allowed in JavaScript, and using one there will present a syntax error (or hang up the interpreter). This is because the - character is also the subtraction operator in JavaScript, so if it sees one of those in a variable called background-color, it'd think that it's supposed to subtract a variable color from a variable background

Joel Stevenson
Joel Stevenson
4,137 Points

How would we know that was the variable name? Where did it come from? I'm confused.

Michael Hulet
Michael Hulet
47,842 Points

Ultimately, we know because the documentation says so. However, in general, if a property is written like-this-in-css, it'll be written likeThisInJavaScript

It seems that I typed background and it works. I am not sure why use background-color or backgroundColor?

document.getElementById('myHeading').style.background = 'yellow'