Controlling CSS with JavaScript

2h 1mAdvanced2021-09-22

Authors

Morten Rand-Hendriksen

Senior Staff Instructor, Speaker, Web Designer, and Software Developer

Course details

JavaScript has full access to the markup of a web page (DOM) and the styles of a page (CSSOM). Using JavaScript to interact with and manipulate the DOM is common practice, but using JavaScript to interact with CSS is rarely explored past the shallow layers of manipulating classes and injecting inline styles. In this course, Morten Rand-Hendriksen takes a deep dive into the intersection of JavaScript and CSS to see what is possible. He explores basic manipulation of the CSSOM to change the live styles of a site, looks at the new opportunities afforded by custom properties, and explores concepts like style tokens. As Morten shows, using JavaScript to control CSS opens the door to more interactive designs and user experiences, and allows designers and developers to do things not possible with CSS alone.

Skills covered

CSSWeb StandardsJavaScriptWeb DesignOracleFront-End Web DevelopmentWeb DevelopmentProgramming LanguagesOpen SourceSoftware DevelopmentOne-Off

Concepts

0. Introduction

01 - New possibilities at the intersection of CSS and JavaScript
02 - Exercise files
03 - Using GitHub Codespaces with this course

1. Accessing Style Sheets and Styles

04 - Access all style sheets in a document
05 - Find specific style sheet in a document
06 - Disable a style sheet using JavaScript
07 - Access rules from a style sheet
08 - Insert and delete rules from a style sheet
09 - Challenge - Stylesheet switcher
10 - Solution - Stylesheet switcher

2. Working with Style Rules

11 - Modify a stylesheet rule
12 - Find what styles have computed for an element
13 - Add new inline styles to an element
14 - Access inline element styles
15 - Treating styles as element attributes

3. Working with Properties

16 - Access the declaration of a specific CSS rule
17 - Get a specific property value
18 - Set existing property value or create a new property
19 - Remove a specific property from a rule
20 - The CSS Typed Object Model
21 - Create and access style rules with the styleMap property
22 - Create access inline element styles with attributeStyleMap
23 - Challenge - Rotate the box
24 - Solution - Rotate the box

4. Working with Custom Properties

25 - Access custom properties
26 - Set custom property values
27 - Understanding registered custom properties
28 - Defining registered custom properties
29 - Challenge - Color selector
30 - Solution - Color selector

Conclusion

31 - New APIs under development