Почему вычисленное значение border-radius в процентах?

Question

[zxf]

Пытаюсь получить вычисленное значение border-radius, указанного в процентах (50% на каждый угол) функцией window.getComputedStyle(element).borderRadius, но возвращается строка: "50%". Ожидается, что вернется вычисленное значение в пикселях.

Из этого 2 вопроса:
1) почему так происходит?
2) Есть ли способы получить ожидаемое поведение "из коробки", без дополнительных вычислений?

Answer 1

[Ivan Gavrilich]

1) Обратимся к документации:

Метод Window.getComputedStyle() возвращает объект, содержащий значения всех CSS-свойств элемента, полученных после применения всех активных таблиц стилей, и завершения базовых вычислений значений, которые они могут содержать.

То есть getComputedStyle().style возвращает те стили, которые были установлены непосредственно в CSS, поэтому строка "50%" после обращения к значению бордер-радиуса - нормальное явление.

2) Скорее всего, здесь без дополнительных вычислений не обойдётся, из коробки нельзя получить значение border-radius в пикселях, если оно было задано в процентах.

Comments

[zxf]

Спасибо за ответ!

Все-равно не понимаю, в чем разница между border-radius и другими свойствами, установленными в относительных величинах. Другие свойства рассчитываются так, как и ожидается - в пикселях. Короче говоря, дело в процессе рассчета border-radius, а не в способе назначения стилей. И мне не понятно, почему border-radius не является вычисленным свойством в тот момент, когда margin, padding, top, left и другие свойства уже вычислены. Любой margin, padding и другие свойства указанные в процентах возвращает вычисленное значение в пикселях, border-radius - нет.

И напоследок скажу, что при указании border-radius в любых других относительных величинах (rem, em, inherit, initial и тд) getComputedStyle() возвращает значение в пикселях, как и ожидается.

Насчет того, что из коробки решить проблему не получится, думаю, Вы правы, насколько мне известно, getComputedStyle - последняя "инстанция" для получения вычисленных значений свойств стилей элемента. Дальше уже только расчет фактических значений.