Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Commands in browser JS console

Hello - with respect to the command in the video - document.getID ("myHeading").style.backgroundColor = "yellow" - two questions:

a). is it fair to say this command combines in one line what would be included separately in the JS and CSS files in a text editor?

b). is there different terminology for writing commands in the browser console? For example, I notice that in a CSS file, the background colour command would be written as background-color whereas in the console it is backgroundColor

Thank you

Faith

2 Answers

Steven Parker
Steven Parker
229,644 Points

This statement would work equally well in a JS file. It combines two operations using the principle known as "chaining".

As you noticed, terms in CSS that use hyphens are converted into camel case in JavaScript since the hyphens would be interpreted as operators there. This applies to all JavaScript coding and not just in the console.

Thank you Steven this is helpful. I learned a new word - "camelCase"!

An additional question: with "chaining", is it theoretically possible (although probably not recommended) that a separate CSS file is not required?

Faith

Steven Parker
Steven Parker
229,644 Points

Dynamic CSS changes by JavaScript should not be used for simple styling, where normal CSS is a better choice. Save it for where things must change in response to events.

And normal CSS can exist in 3 different places, alone or in combination:

  • inline, in a "style" attribute inside an HTML tag
  • local, between "<style>" tags in the HTML file
  • external, in a separate CSS file

But "best practice" is to keep the CSS in separate files(s) to satisfy the concept of "separation of concerns" and to simply further development and maintenance.

Thanks Steven!