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

Posted by ab199
.a{fill-rule:evenodd;}techdegree
ab199
Full Stack JavaScript Techdegree Student 17,446 Points

Can someone explain how JavaScript changes CSS properties?

This, to me, is like magic. I don't get how adding CSS tags in JavaScript changes the layout. How does this stuff work?

2 Answers

Marcus Parsons
Marcus Parsons
15,719 Points

Hey Yan,

Whenever you change CSS styling in JavaScript, it adds in those styles as inline styles and as such, the browser will give those styles are a higher specificity than internal or external stylesheets, overriding what was declared in any stylesheet. I still love that you can override styles in JavaScript, but be wary of changing too many styles. You should always have fallback CSS for your styles set in JavaScript. =]

ab199
.a{fill-rule:evenodd;}techdegree
ab199
Full Stack JavaScript Techdegree Student 17,446 Points

Hey Marcus,

How does it know? What goes on "behind the scenes?" This stuff is too cool to not know how it works :)

Marcus Parsons
Marcus Parsons
15,719 Points

This is the perfect article for you, my friend! https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style

Whenever I have any questions, I check out the MDN (Mozilla Developer Network). Anything you can think of that deals with JavaScript's methods, functions, objects, etc. will be there :)

ab199
seal-mask
.a{fill-rule:evenodd;}techdegree
ab199
Full Stack JavaScript Techdegree Student 17,446 Points
ab199
.a{fill-rule:evenodd;}techdegree
ab199
Full Stack JavaScript Techdegree Student 17,446 Points

Thanks again, Marcus! I hope you have a wonderful day!

Marcus Parsons
Marcus Parsons
15,719 Points

You, as well, Yan!

I have one more cool thing to show you, though :) Try messing around with your console and modify this code to do some cool stuff to the page you're on. This little piece of code gets every single element on the page (the * selector), and loops through it, adding a style to it of a 1px solid black border. When you copy this into the console, it will only display on your side and will vanish if you refresh the page or go to another page. 

var el = document.getElementsByTagName('*');
for (var i = 0; i < el.length; i += 1) {
el[i].style.border = "1px solid black";
}

You can do a lot of cool stuff with your console like this. Play around :P