Получение результата CSS calc для установки пользовательских свойств

Question

Я тестирую структуру CSS для указания чисел через микроклассы. Например, что-то вроде <div class="fifty percent wide"> может перевести на width: 50%. Реализация использует переменные CSS (пользовательские свойства).

Рассмотрим следующий CSS:

.fifty { --number: 50; } 
.percent { --percent: calc(1% * var(--number)); } 
.wide { width: var(--percent); } 

Это все хорошо и прекрасно работает. Проблема в том, что я хочу написать набор тестов, который будет проверять, что fifty percent приводит к значению для настраиваемого свойства --percent из 50%. К сожалению, если я использую getComputedStyle для изучения значения --percent, я вижу целую (неразрешенную, несоизмеримую) строку «calc». Если я рассмотрю значение width, я получаю уже разрешенное значение, такое как «512px».

Есть ли способ получить и проверить программно разрешенные, рассчитанные значения пользовательских свойств CSS? Или API для принудительной оценки выражений «calc»?

Answer 1

Один из способов сделать это - рассчитать процент самостоятельно, получив ширину от элемента и его родителя (в пикселях). Затем просто разделите parentWidth на elementWidth, чтобы рассчитать процент.

Кроме того, возможно, вы можете проверить CSS вручную. Если все работает так, как ожидалось, вам больше не нужны тестовые примеры. Не похоже, чтобы это перерывало ночь, верно?

Answer 2

У вас есть ошибка опечатка в .percent классе:

.percent { --percent: calc(1% * var(--number); } 
//          ^ you have to close Brackets of Calc() 
.percent { --percent: calc(1% * var(--number)); } 

Я предлагаю, чтобы сделать простой тест, получив ширину элемента и его родителя в рх, что-то вроде:

var elem = document.getElementById("test"); 
 
var parent = document.getElementById("parent"); 
 
var elem_width = window.getComputedStyle(elem, null).getPropertyValue("width"); 
 

 
alert("50% of 200px parent width = " + elem_width);

#parent{ 
 
    background-color:black; 
 
    width:200px; 
 
    height: 200px; 
 
} 
 

 
.fifty { --number: 50; } 
 
.percent { --percent: calc(1% * var(--number)); } 
 
.wide { 
 
    width: var(--percent); 
 
    height: 100px; 
 
    background-color:red; 
 
}

<div id="parent"> 
 
    <div id="test" class="fifty percent wide"> 
 
    </div> 
 
</div>

_{ПРИМЕЧАНИЕ: A ttributes или стили CSS, которые он не понимает из кода в DOM. Это по дизайну. Javascript имеет доступ только к DOM, а не к коду. Таким образом, нет, нет доступа к ресурсу из javascript, который сам браузер не поддерживает.}