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) Getting a Handle on the DOM Select All Elements of a Particular Type

brendon hanson
brendon hanson
6,191 Points
Posted by brendon hanson
brendon hanson
6,191 Points

I don't quite understand the (.style.color) where do you get these words?

Is there a site that shows all the words you can use? Could you give me any detail on why you say style.color please?

3 Answers

Steven Parker
Steven Parker
231,269 Points
Steven Parker
Steven Parker
231,269 Points

MDN is an excellent reference for this kind of information. The "style" keyword is one of the properties of an HTMLelement, and "color" is one of the vast collection of CSS properties that can be set.

In this case, ".style.color" is the specific property that controls what foreground (such as for text) color will be used for displaying that specific element on the screen.

Christian Higgins
Christian Higgins
15,758 Points
Christian Higgins
Christian Higgins
15,758 Points

Brendon, have you watch the prerequisite CSS courses, such as CSS Basics?

brendon hanson
brendon hanson
6,191 Points
brendon hanson
brendon hanson
6,191 Points

No, but I am going to go through that course and the html course very soon! I should've done that to begin with but oh well

Kevin Ohlsson
Kevin Ohlsson
4,559 Points
Kevin Ohlsson
Kevin Ohlsson
4,559 Points

Can someone correct me?

html

    <button id="changerButton">change headline color</button>

app.js

    const colorChangerButton= document.getElementById("changerButton");

console

   colorChangerButton.style.color = "red"

colorChangerButton is a reference to the button.

Button is an element provided by document

colorChangerButton is a link to the element in HTML file accessed from the JS app

.style is a method of the document object model OR .style is a property of the document

.color is an property of style.

.color holds an attribute, in this case ="red".

an attribute is something we give to something that is not something this thing is "Born with".

A property is not an attribution instead an inherit quality of something.

is this right?