FAQ: Javascript and the DOM - Style an element

Community%20FAQs%20on%20Codecademy%20Exercises

This community-built FAQ covers the “Style an element” exercise from the lesson “Javascript and the DOM”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

FAQs on the exercise Style an element

There are currently no frequently asked questions associated with this exercise – that’s where you come in! You can contribute to this section by offering your own questions, answers, or clarifications on this exercise. Ask or answer a question by clicking reply (reply) below.

If you’ve had an “aha” moment about the concepts, formatting, syntax, or anything else with this exercise, consider sharing those insights! Teaching others and answering their questions is one of the best ways to learn and stay sharp.

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

The interface says that I successfully completed the exercise, but the background color did not change. The only way for me to make it change is to comment out the relevant CSS. There are other Codeacademy exercises that have a similar result - CSS wins out over JS. I have tried this on both Safari and Chrome running on MacOS. This is my code:

let bodyColor = document.querySelector('body');
bodyColor.style.backgroundColor = '#201F2E';

What am I doing wrong?

Nothing, as such, but we should review the CSS before drawing any conclusions. Examine the selector rule for body in the style sheet. Notice that it is using the background property, and not background-color? There is the problem.

Our JS should be targeting that property, rather than backgroundColor, or we should change the CSS to use, background-color instead of background. Either way, we fix the problem (but also lose the gradient).

6 Likes

Ah tricky. I will keep an eye out for this. Thanks!

1 Like

so is this a mistake made by codeCademy? because I got the same problem

1 Like

either way great learning experience thanks to this forum

2 Likes

Same here. I think it’d make great sense to change the exercise to reflect that.
About background vs. background-color:
The background-color property doesn’t allow for gradients?

gradiants are properties of background. background-color can only take color palette values.

2 Likes

I have a question. Was this intentional? Because it is EXTREMELY confusing. This is the text from the question:

Style the background-color of the body in the blog-post document to match the color of the Codecademy text editor, '#201F2E' by using the .style property.

Looking at the CSS style sheet shows that ‘background’ is what should be changed if you actually want to change the color in the editor. But the question specifically states to style the ‘background-color’. But doing that in main.js does nothing to the blogpost. But the test passes? That is crazy confusing.

Which means, either the test passes and nothing changes or you change the color, but the test does not pass.

Or am I missing something?

background and background-color are not the same property. The latter is more specific and will override the former, if one is not mistaken. We can test this by writing both properties in the same rule, one after the other and see which one has the ability to override the other.

background: #808080;    /* gray */
background-color: #008080;    /* teal */

What color is the background? Now reverse them and see which color appears.

background-color: #008080;    /* teal */
background: #808080;    /* gray */

Is the background gray or teal?

It may be my hypothesis is wrong. In the JavaScript console we can toggle the color…

document.querySelector('body').style.background = '#808080'

gives us gray,

document.querySelector('body').style.backgroundColor = '#008080'

gives us teal. It goes back to gray when we repeat the first statement, and back to teal on the second. What happens in the actual script, though?

I agree, you are correct on the background and background-color are different.

The problem I pointed out was that the question/instruction were to “Style the background-color”. But doing that changes nothing, but the test passes as if something was done correctly. It is insanely confusing.

Here is the question:

Style the background-color of the body in the blog-post document to match the color of the Codecademy text editor, '#201F2E' by using the .style property.

The part that confuses me is, why does the test pass? Meaning, the little green check box says I did something right. But looking at the blog post nothing changes. I have to actually change ‘background’ to get the color to change to what is in the instructions.

Go to the course and follow the steps as outlined. You will see what I am talking about.

I see what you’re saying. If we set the background, nothing happens, but if we set the background-color, the change takes effect and we can see the gradient effect.

Be sure to use the JS camelCase property name. Hyphenated names don’t work in JS.

backgroundColor

We’ll see if we can’t get someone to look in on this lesson. Might be there is nothing they can do to change it, aside from the proviso I just gave you, above.


Unclear instructions reported.