Working With the new CSS Typed Object Model
Like if we wanted to know the padding of an element, classically we’d do:
var el = document.querySelector("#thing"); var style = window.getComputedStyle(el); console.log(style.padding);
And we’d get “20px” as a string or whatever it is.
One of these new API’s lets us pull it off like this:
console.log( el.computedStyleMap().get('padding').value, el.computedStyleMap().get('padding').unit );
And we get
20 as a real number and “px” as a string.
There is also
attributeStyleMap with getters and setters, as well as functions for each of the values (e.g.
Eric counts the benefits:
- Few bugs.
- Arithmetic operations & unit conversion.
- Value clamping & rounding.
- Better performance.
- Error handling.
- Naming matches CSS exactly.