Как получить значение calc в px в JS?

Question

[tyoma_koder]

Я задаю ширину блока в JS через calc

elem.style.width = `var(calc( (100% - ${gap*cnt}px + ${gap}px)/${cnt} ))`;

могу ли я как то получить результат этой операции в px до применения этого стиля к блоку?

Comments

[godsplan]

let i = elem.style.width = `var(calc( (100% - ${gap*cnt}px + ${gap}px)/${cnt} ))`;

?

Answer 1

[Вадим]

А в чём сложность? У Вас все переменные уже есть. Осталось найти 100%.
100% это ширина для контента у родительского блока.
родительский блок - elem.parentElement
а там уже на Ваше усмотрение(по ситуации) как узнать чему будем равняться доступная для контента ширина.
Например
el.parentElement.clientWidth
или

getComputedStyle(el.parentElement).width // более точный результат, так как спрашивает у браузера конечные стили. Но, соответственно, и отработает медленнее(на глаз не заметно)

Не забудьте про падинги.

Comments

[tyoma_koder]

а если бы небыло переменных?

[Вадим]

tyoma_koder, Не совсем понятно, что значит если бы не было переменных? Если к элементу уже применен calc?

[tyoma_koder]

Вадим, ну например было бы

elem.style.width = `var(calc( (100% - 3vw + 5rem/2em ))`;

[Вадим]

tyoma_koder, Ну Вы знаете что это за единицы измерения?
Их и ищите.
vw - ширина вьюпорта. 1vw - 1% от ширины вьюпорта.
rem - размер шрифта, относительно root. По умолчанию 16 пикселей, может регулироваться браузером пользователя. getComputedStyle(htmlElement).fontSize; 5rem - соответственно, умноженное на 5.
em - размер шрифта родительского блока. 2em - соответсвенно умноженное на 2.

[tyoma_koder]

Вадим, т.е. готовый ответ без эмуляции css не получить?

[Вадим]

tyoma_koder, не знаю что Вы имеете ввиду под "без эмуляции css". У Вас в css описана функция. Ту же самую функцию нужно воспроизвести в js.
Выше я описал что искать с помощью js.

Answer 2

[Alex]

Читайте HTMLElement.offsetWidth или аналог (зависит от конкретного случая)