The CSSNumericArray interface of the CSS Typed Object Model API represents an iterable of CSSNumericValue-based objects.

An object of this type is used to represent the operands of a mathematical operation in the values property of CSSMathSum, CSSMathProduct, CSSMathMin, and CSSMathMax.

The items can be accessed by index (array[0]), and as an iterable it can be used with a for...of loop or the spread syntax.

Instance properties

CSSNumericArray.length Read only

Returns the number of items in the object.

Instance methods

CSSNumericArray.entries()

Returns a new array iterator that yields [index, value] pairs for each item in the object.

CSSNumericArray.forEach()

Executes a provided function once for each item in the object.

CSSNumericArray.keys()

Returns a new array iterator that yields the index of each item in the object.

CSSNumericArray.values()

Returns a new array iterator that yields each item in the object.

Examples

Reading the terms of a CSSMathSum

The values property of a CSSMathSum is a CSSNumericArray containing the terms of the sum. This example creates a CSSMathSum, then reads its values via length, indexed access, and iteration.

const sum = new CSSMathSum(CSS.px(10), CSS.em(5), CSS.percent(50));
const values = sum.values;

console.log(values.length); // 3
console.log(values[0]); // CSSUnitValue {value: 10, unit: "px"}

for (const value of values) {
  console.log(value.toString());
}
// "10px"
// "5em"
// "50%"

Specifications

Browser compatibility

See also

• CSSMathSum
• CSSMathProduct
• CSSMathMin
• CSSMathMax
• CSSNumericValue
• Using the CSS Typed OM
• CSS Typed Object Model API