CSSMathSum

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает во всех широко используемых браузерах.

Интерфейс CSSMathSum API CSS Typed Object Model представляет результат вызова add(), sub() или toSum() для CSSNumericValue.

CSSMathSum — это тип объекта, возвращаемого методом StylePropertyMapReadOnly.get() для свойства CSS, значение которого создано с помощью функции calc().

Конструктор

CSSMathSum() Экспериментальный: Создаёт новый объект CSSMathSum.

Свойства экземпляра

CSSMathSum.values: Возвращает объект CSSNumericArray, который содержит один или несколько объектов CSSNumericValue.

Статические методы

Интерфейс может также унаследовать методы от своего родительского интерфейса CSSMathValue.

Методы экземпляра

Интерфейс может также унаследовать методы от своего родительского интерфейса CSSMathValue.

Примеры

Мы создаём элемент с width, определённым с помощью функции calc(), затем console.log() operator и values, и немного углубляемся в значения.

<div>has width</div>

Мы назначаем width

div {
  width: calc(30% - 20px);
}

Мы добавляем JavaScript

const styleMap = document.querySelector("div").computedStyleMap();

console.log(styleMap.get("width")); // CSSMathSum {values: CSSNumericArray, operator: "sum"}
console.log(styleMap.get("width").operator); // 'sum'
console.log(styleMap.get("width").values); // CSSNumericArray {0: CSSUnitValue, 1: CSSUnitValue, length: 2}
console.log(styleMap.get("width").values[0]); // CSSUnitValue {value: 30, unit: "percent"}
console.log(styleMap.get("width").values[0].value); // 30
console.log(styleMap.get("width").values[0].unit); // 'percent'
console.log(styleMap.get("width").values[1]); // CSSUnitValue {value: -20, unit: "px"}
console.log(styleMap.get("width").values[1].value); //  -20
console.log(styleMap.get("width").values[1].unit); // 'px'

Спецификация всё ещё разрабатывается. В будущем мы можем переписать последние три строки как:

console.log(styleMap.get("width").values[1]); // CSSMathNegate {value: CSSUnitValue, operator: "negate"}
console.log(styleMap.get("width").values[1].value); // CSSUnitValue {value: 20, unit: "px"}
console.log(styleMap.get("width").values[1].value.unit); // 'px'

Спецификации

Спецификация
CSS Typed OM Level 1 # cssmathsum

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari в iOS	Samsung Internet	WebView Android
`CSSMathSum`	66	79	Нет	53	Нет	66	Нет	47	Нет	9.0	66
`CSSMathSum`	66	79	Нет	53	16.4	66	Нет	47	16.4	9.0	66
`values`	66	79	Нет	53	16.4	66	Нет	47	16.4	9.0	66

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CSSMathSum