Overview
-
Learn how using JavaScript to control CSS opens the door to more interactive designs and user experiences.
Syllabus
-
Introduction
- New possibilities at the intersection of CSS and JavaScript
- Exercise files
- Access all style sheets in a document
- Find specific style sheet in a document
- Disable a style sheet using JavaScript
- Access rules from a style sheet
- Insert and delete rules from a style sheet
- Challenge: Stylesheet switcher
- Solution: Stylesheet switcher
- Modify a stylesheet rule
- Find what styles have computed for an element
- Add new inline styles to an element
- Access inline element styles
- Treating styles as element attributes
- Access the declaration of a specific CSS rule
- Get a specific property value
- Set existing property value or create a new property
- Remove a specific property from a rule
- The CSS Typed Object Model
- Create and access style rules with the styleMap property
- Create/access inline element styles with attributeStyleMap
- Challenge: Rotate the box
- Solution: Rotate the box
- Access custom properties
- Set custom property values
- Understanding registered custom properties
- Defining registered custom properties
- Challenge: Color selector
- Solution: Color selector
- New APIs under development
