Controlling CSS with JavaScript

Introduction

• New possibilities at the intersection of CSS and JavaScript
• Exercise files

1. Accessing Style Sheets and Styles

• 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

2. Working with Style Rules

• 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

3. Working with Properties

• 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

4. Working with Custom Properties

• Access custom properties
• Set custom property values
• Understanding registered custom properties
• Defining registered custom properties
• Challenge: Color selector
• Solution: Color selector

Conclusion

• New APIs under development