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

CSS jQuery Basics (2014) Creating a Simple Drawing Application Perform: Part 1

Ethan Neff
Ethan Neff
27,058 Points
Posted by Ethan Neff
Ethan Neff
27,058 Points

How does it know to redraw the CSS properties to the new .selected element? Does the CSS file get recalled?

I know the CSS adds unique styles per element, class, etc... But how does it know that an element has changed?

Does the whole CSS file get recalled whenever this is ran?

$(this).addClass('selected');

Or does it get called whenever any event happens?

$('.controls li').click(....);

Or does it just automatically know that an element has changed and reassigns the correct CSS styles?

1 Answer

William Bruntrager
William Bruntrager
11,473 Points
William Bruntrager
William Bruntrager
11,473 Points

I am not an expert but I did a search on this question, and it seems the answer is that CSS redrawing depends on the browser.

On this page:

http://taligarsiel.com/Projects/howbrowserswork1.htm

there is a discussion of what should be happening, under the title "Dirty bit system." As the JavaScript is executing, the browser marks any elements in the HTML that are being changed. Then, after the JS is finished, the browser goes over each changed element and applies existing CSS styling to that element.

Some search results linking to stackoverflow.com reveal that not all browsers are perfect in this regard, and some elements in some cases are not redrawn with the appropriate CSS styling. What to do in that case seems to be an open question.

Another interesting source:

http://javascript.info/tutorial/events-and-timing-depth#javascript-execution-and-rendering