Typed OM: Part 3 Style Maps & Methods

Now that we know all about the CSSStyleValue types, let's take a look at creating them and setting them on an element.

So far we've been working with computedStyleMap, which returns all the properties and values affecting an element, but there is also the attributeStyleMap for getting and setting inline styles. This is much like our already commonly used style() method, and you might wonder why we need to change something that works. With this new Typed OM method we also work with all the CSSStyleValue types, rather than just strings. This makes our code far more robust and flexible.

Note: Both the computed and attribute style maps are of type StylePropertyMap, which is a map-like object, and so supports all the common methods like get(), set(), keys(), values(), and entries() — making them intuitive to work with¹. There is also styleMap, which is described further down.

Let's take a look at the methods available to us when using the attributeStyleMap. To simply add a style and then retrieve it, we can use the set() and get() methods.

buttonEl.attributeStyleMap.set('padding-top', CSS.px(10));

const padTop = buttonEl.attributeStyleMap.get('padding-top');

console.log(padTop);
// logs: CSSUnitValue {value: 10, unit: 'px'}

A couple of things to note here: When we are setting the pixel value we are creating a CSSUnitValue using the CSS.px() factory method. We could have set it thus:

new CSSUnitValue(10, px);

We can use this to create any CSSStyleValue we've already seen

Also, when we get the property a CSSUnitValue returned. That's handy because we don't have to do any parsing to retrieve the number or the unit, they are just available to us.

And there's more, as well as the set() and get() methods, there are has(), delete(), and clear().

buttonEl.attributeStyleMap.has('padding-top') // returns true

buttonEl.attributeStyleMap.delete('padding-top') // removes padding-top from attribute styles

buttonEl.attributeStyleMap.clear() // removes all attribute styles
	

As well as attribute styles we can also access stylesheet rules:

const stylesheet = document.styleSheets[0];

Object.values(stylesheet.cssRules).forEach(block => {

	if (block.selectorText === 'button') {
		console.log(block.cssText);
	}
})
// Logs css block: button { --unit: 1.2rem; --mainColour: hsl(198, 100%, 66%); display: inline-block; padding: var(--unit) calc(var(--unit)*2); ...}

The methods already discussed are available to us and we can modify or update any of these properties like so:

if (block.selectorText === '.example') {
	block.styleMap.set('--mainColour', 'black');
}

Might be worth noting this should be used with caution, as it's a pretty powerful way to update your styles.

Well done! You've covered all the basics of using Typed OM. There's quite a bit there and with all the values quite a bit still to think about (all the math sums for instance) There's a reference with resources here and loads more information in the MDN docs.

There's more examples here of using Typed OM in practice.

¹https://developers.google.com/web/updates/2018/03/cssom