A huge array of properties and values is returned. Let's take a closer look at those values. They are all of type CSSStyleValue — let's retrieve some values using the get() method, which comes with computedStyleMap().
CSSStyleValue has sub classes, depending on the type of value you use for the defined property. Let's take a look at them.
CSSStyleValue
Parent class for all values set on an element.
This class holds the parse and parseAll methods, which we will look at a bit later. Before we do that, let's take a look at all the sub classes.
CSSKeywordValue
Class that defines things like keywords (see the list here) — e.g. inherit, initial, unset, and anything you don't quote such as auto, grid etc...
const cssKeywordValue = allComputedStyles.get('display');
// Returns: This subclass gives you a value property which returns the display type set: cssKeywordValue.value
console.log(cssKeywordValue.value);
// Logs: CSSImageValue
Returned when the value of a CSS property is an image.
const cssImageValue = allComputedStyles.get('background-image');
// Returns: At the time of writing this is yet to be implemented - the spec only holds the CSSImageValue type as it's needed for the CSS Paint API. This will be expanded on in future versions: cssImageValue.value
console.log(cssImageValue.value);
// Logs: CSSNumericValue
Returned when the value is numeric. This is a superclass from which CSSUnitValue and CSSMathSum are derived, so one of these will be returned instead, depending on whether the value is determined via the calc(), min(), max() function or not.
CSSUnitValue
Returned if a value is of unit type.
const cssUnitValue = allComputedStyles.get('border-top-width');
// Returns: With this type we can access the numeric value: cssUnitVal.value and its unit: cssUnitVal.unit
console.log(`Value: ${cssUnitVal.value}, Unit: ${cssUnitVal.unit}`);
// Logs: CSSMathSum
Returned if the CSS value is determined via the calc(), min(), max() functions, and the units specified are of different unit types.
const cssMathSum = allComputedStyles.get('width');
// Returns: With this type we can access the calculation that has occurred, as well as units involved in that calculation. These are returned as an array of CSSUnitValues
let units = ''
for (const unit of cssMathSum.values) {
units += ` value: ${unit.value}, unit: ${unit.unit}`;
}
console.log(`Operator: ${cssMathSum.operator}, | Values: ${units}`)
// Logs: CSSTransformValue
If a transform value is used, this type is returned.
const cssTransformValue = allComputedStyles.get('transform');
// Returns: Returns a list of all the different transforms applied to the element and their different values. The transform determines what is returned. In our example here we just have a scale applied.
let scale = {}
for (const transform of cssTransformVal) {
scale.is2d = transform.is2D;
scale.vec = ` x: ${transform.x}, y: ${transform.y}, z: ${transform.z}`;
}
console.log(`is2D: ${scale.is2d}, | Coords: ${scale.vec}`);
// Logs: CSSUnparsedValue
Represents custom properties
const cssUnparsedValue = allComputedStyles.get('--unit');
// Returns: This returns any values of a custom property that could be set or affect said element. Here we're specifying which property we want.
console.log(cssUnparseValue[0]);
// Logs: CSSVariableReferenceValue
If we want to create a custom property, rather than just retrieve its value, we would use the CSSVariableReferenceValue type. This is not returned, as you can use any value with a custom property when setting it, however it can be defined when created. The value we enter here needs to be of type CSSUnparsedValue.
const customProp = new CSSVariableReferenceValue('--secondColour', new CSSUnparsedValue(['black']));
console.log(customProp);
// Logs: CSSVariableReferenceValue {variable: "--secondColour", fallback: CSSUnparsedValue}There's more about creating properties and values using these types in the next section.
Parsing Properties & Values
We can parse CSSUnparsedValue object instances with a couple of methods we get with the CSSStyleValue type: parse() and parseAll(). As it's a numeric value we'll use the CSSNumericValue.parse() method on the value. Let's take a look:
const parsed = CSSNumericValue.parse(cssUnparseVal);
console.log(parsed);
// Logs: CSSUnitValue {value: 1.2, unit: "rem"}We can do this with any property and value if we use the parse() method on the CSSStyleVal super class:
const anotherParsed = CSSStyleValue.parse('background', 'red');
console.log(anotherParsed);
// Logs: CSSStyleValueThis can be handy for a number of reasons. These new types are nice to work with in JavaScipt, plus we get out of the box error handling:1
try {
const css = CSSStyleValue.parse('transform', 'translate4d(bogus value)');
// use css
} catch (err) {
console.err(err);
}These are all of the types we will get to work with, and there are more to come as well. Not only do we have better access to CSS value information, we also have better ways of setting and retrieving styles on an element. Let's take a look in part three.