CSSNumericValue: equals() method
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Want more browser support for this feature? Tell us why.
Note: This feature is available in Web Workers.
The equals() method of the CSSNumericValue interface returns true if every value passed to it is the same as the CSSNumericValue, and false otherwise.
The method compares how the values are written, not what they compute to. Single values, such as those represented by CSSUnitValue, are the same when they have the same value and unit. Units aren't converted, so CSS.in(1) isn't the same as CSS.cm(2.54), even though both are one inch long. Calculations, such as sums represented by CSSMathSum, are the same when they are the same kind of calculation and contain the same values in the same order. So calc(1px + 2px) isn't the same as calc(2px + 1px), or as 3px.
Syntax
equals()
equals(number1)
equals(number1, number2)
equals(number1, number2, /* ā¦, */ numberN)
Parameters
number1, ā¦,numberNOptional-
Either a number or a
CSSNumericValue. A number is compared as a value without a unit, like one created withCSS.number().
Return value
true if every value passed is the same as the CSSNumericValue, and false otherwise. If no values are passed, the method returns true.
Exceptions
None.
Examples
Basic usage
Values with the same number and unit are the same, and so are sums of the same values in the same order:
console.log(CSS.px(10).equals(CSS.px(10))); // true
const sum = new CSSMathSum(CSS.px(1), CSS.px(2));
console.log(sum.equals(new CSSMathSum(CSS.px(1), CSS.px(2)))); // true
Changing the order of the values in a sum, comparing a sum to its result, or writing the same length in a different unit, makes the values different:
console.log(sum.equals(new CSSMathSum(CSS.px(2), CSS.px(1)))); // false
console.log(sum.equals(CSS.px(3))); // false
console.log(CSS.in(1).equals(CSS.cm(2.54))); // false
Comparing several values
When several values are passed, the method returns true only if each of them is the same as the CSSNumericValue. A number is compared as a value without a unit:
console.log(CSS.number(5).equals(5, CSS.number(5))); // true
console.log(CSS.px(10).equals(CSS.px(10), CSS.px(11))); // false
Specifications
| Specification |
|---|
| CSS Typed OM Level 1 # dom-cssnumericvalue-equals |