Controlling CSS with JavaScript

Focused View

Morten Rand-Hendriksen

1:53:10

0 View

[1] Introduction

[1] New possibilities at the intersection of CSS and JavaScript.mp4

01:01

[2] Exercise files.mp4

01:47

[2] 1. Accessing Style Sheets and Styles

[1] Access all style sheets in a document.mp4

02:46

[2] Find specific style sheet in a document.mp4

05:20

[3] Disable a style sheet using JavaScript.mp4

02:29

[4] Access rules from a style sheet.mp4

04:18

[5] Insert and delete rules from a style sheet.mp4

04:40

[6] Challenge Stylesheet switcher.mp4

02:09

[7] Solution Stylesheet switcher.mp4

03:43

[3] 2. Working with Style Rules

[1] Modify a stylesheet rule.mp4

04:19

[2] Find what styles have computed for an element.mp4

05:20

[3] Add new inline styles to an element.mp4

03:18

[4] Access inline element styles.mp4

01:34

[5] Treating styles as element attributes.mp4

03:14

[4] 3. Working with Properties

[1] Access the declaration of a specific CSS rule.mp4

02:48

[2] Get a specific property value.mp4

02:32

[3] Set existing property value or create a new property.mp4

03:28

[4] Remove a specific property from a rule.mp4

03:10

[5] The CSS Typed Object Model.mp4

05:28

[6] Create and access style rules with the styleMap property.mp4

05:06

[7] Createaccess inline element styles with attributeStyleMap.mp4

04:11

[8] Challenge Rotate the box.mp4

02:11

[9] Solution Rotate the box.mp4

03:28

[5] 4. Working with Custom Properties

[1] Access custom properties.mp4

04:06

[2] Set custom property values.mp4

03:03

[3] Understanding registered custom properties.mp4

05:49

[4] Defining registered custom properties.mp4

08:33

[5] Challenge Color selector.mp4

04:33

[6] Solution Color selector.mp4

07:17

[6] Conclusion

[1] New APIs under development.mp4

01:29

Description

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.

This course is integrated with GitHub Codespaces, an instant cloud developer environment that offers all the functionality of your favorite IDE without the need for any local machine setup. With Codespaces, you can get hands-on practice from any machine, at any time—all while using a tool that you’ll likely encounter in the workplace. Check out the “Using GitHub Codespaces with this course” video to learn how to get started.

More details

User Reviews

Rating

average 0

Total votes0

Focused display

JavaScript

CSS

Morten Rand-Hendriksen

Instructor's Courses

Since joining forces with lynda.com (now LinkedIn Learning) in 2010, I've 60+ published courses on WordPress, front end web design and development, and web standards, reaching hundreds of thousands of viewers from all over the world. I also contribute to the web community as a public speaker, author, educator, web developer, and design philosopher. I help the web make sense by helping people understand and get the most out of the web, and contribute to the debates about ownership and democratization of information, design philosophy, and the open web.

Linkedin Learning

View courses Linkedin Learning

LinkedIn Learning is an American online learning provider. It provides video courses taught by industry experts in software, creative, and business skills. It is a subsidiary of LinkedIn. All the courses on LinkedIn fall into four categories: Business, Creative, Technology and Certifications. It was founded in 1995 by Lynda Weinman as Lynda.com before being acquired by LinkedIn in 2015. Microsoft acquired LinkedIn in December 2016.