CSS Typed Object Model
The CSS Typed Object Model (OM) API provides a more typed and structured way to interact with CSS values in JavaScript, as opposed to the traditional string-based approach of element.style.
Getting Started
The CSS Typed Object Model (OM) exposes CSS values as typed JavaScript objects rather than simple strings. This allows for more robust and performant manipulation of CSS properties directly from JavaScript.
const element = document.getElementById('myElement');
// Traditional way (string-based)
element.style.opacity = '0.5';
const opacityString = element.style.opacity; // "0.5"
console.log(typeof opacityString); // "string"
// Using CSS Typed OM
if (element.attributeStyleMap) {
// Set a value
element.attributeStyleMap.set('opacity', CSS.number(0.7));
// Get a value
const opacityTyped = element.attributeStyleMap.get('opacity');
console.log(opacityTyped.value); // 0.7
console.log(opacityTyped.constructor.name); // CSSUnitValue or CSSNumericValue (CSSNumberValue in some impl)
// Example with units
element.attributeStyleMap.set('width', CSS.px(200));
const widthTyped = element.attributeStyleMap.get('width');
console.log(widthTyped.value); // 200
console.log(widthTyped.unit); // "px"
// You can also work with computed styles
const computedOpacity = element.computedStyleMap().get('opacity');
console.log('Computed Opacity:', computedOpacity.value);
} else {
console.log('CSS Typed OM not supported in this browser.');
}