Разбор CSS единицы на число
Описание
В моей странице есть стандартный размер, заданный через стили css. Находится он в :root и имеет имя --size-standard. Я точно знаю что он есть, но не знаю какое у него единица измерения (px, cm, in, vw, vmin...).
В скрипте JS мне нужно получить это значение как число и использовать его для иных целей (к примеру для ширины линии в canvas-е).
Говоря "значение как число" имеется ввиду значение в пикселях конвертированный в число.
Проблема
Вот только что бы я не пробовал, мне не удается получить это значение в пикселях.
К примеру вот:
const stringSizeStandard = getComputedStyle(document.documentElement).getPropertyValue(`--size-standard`);
const numberSizeStandard = CSSNumericValue.parse(stringSizeStandard).to(`px`).value;:root {
--size-standard: 6vmin;
}Получаю:
Uncaught TypeError: Failed to execute 'to' on 'CSSNumericValue': Cannot convert to px
Вопрос
Что я могу делать? Как мне разобрать CSS единицу на число?
Уточнение
Варианты без использования библиотек предпочтительнее.
Ответы (1 шт):
Желательно всё таки знать величину которая будет root: иначе прийдеться писать функцию определения, а так то вот.
document.addEventListener("DOMContentLoaded", function() {
const stringSizeStandard = getComputedStyle(document.documentElement).getPropertyValue("--size-standard");
console.log(stringSizeStandard);
// Преобразуем значение в число без единицы измерения
const sizeStandardWithoutUnit = parseInt(stringSizeStandard);
// Теперь получаем размер в пикселях
const sizeStandardInPx = sizeStandardWithoutUnit * (window.innerWidth / 100); // Переводим из vw в px
console.log(sizeStandardInPx + "px");
});:root {
--size-standard: 6vmin;
}
.block {
width: var(--size-standard);
height: 30px;
background-color: pink;
}<div class="block"></div>Возможно вы пытались получить значения, до момента сборки DOM дерева и отрисовки нужных стилей...