Week 5 – CSS Styling with JavaScript and more CSS

Standard

This week I taught my group about using JavaScript to use CSS styles, and how you can add or remove them as well. I found it super fascinating, and below you can see my notes:

Setting CSS Styles using JavaScript

You can use JavaScript to directly set a style on an element, and you can also use JavaScript to add or remove class values on elements which will alter which style rules get applied.

Why would you want to use JavaScript?

  • You want items to change in style as people do things, not just when they load.
  • While CSS does offer pseudo selectors (ex: hover), they are not numerous and limited.

Two ways to style with JS

  1. Set a CSS property directly on the element
  2. Remove or add class values, which can add or take away style rules

Style Directly

  • You can select only one by using a class or id and targeting it
  • You can select all assigned to a class and write a for loop to change it

*Pay attention to how things are written in CSS and JavaScript. Ex. font-weight in CSS is fontWeight in JavaScript. They also may need px or em to make it work.

Add or Remove Classes

  • Can use classList API (see resources for more info)
  • Use add or remove
  • Useful with CSS that is already set

Example Code

http://codepen.io/jnetlar4/pen/JGeGOX

Resources

https://www.kirupa.com/html5/setting_css_styles_using_javascript.htm

https://developer.mozilla.org/en-US/docs/Web/API/Document

https://www.kirupa.com/html5/using_the_classlist_api.htm


I also learned more about animation, transitions and transforming with CSS3. I feel like I have a solid grasp on it now and am working on a card flip action that can be used on our group app (a study card app).

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s