Typed OM: Part 1 Intro

Let's use this cool button to go over some of the basic features of Typed OM.

For any element you can use the computedStyleMap() method to retrieve all the styles affecting the element.

Let's use this method to get all the styles for the below button.

// get the button element
const buttonEl = document.querySelector('button');
// get our element to append info to
const stylesList = document.querySelector('#all-styles');

// let's get some styles -> we can retrieve all computed styles with `computedStyleMap`
const allComputedStyles = buttonEl.computedStyleMap();

// which returns a map of all computed styles -> ie those already set in non-inline css
for (const [prop, val] of allComputedStyles) {
	// properties
	const term = document.createElement('dt');
	term.appendChild(document.createTextNode(prop));
	stylesList.appendChild(term);

	// values
	const valDef = document.createElement('dd');
	valDef.appendChild(document.createTextNode(val));
	stylesList.appendChild(valDef);
}

Check out all the retrieved styles

Let's take a look at different value types in part two.