Конвертировать единицы CSS ⇐ CSS

[Anonymous]

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

например, если у меня есть элемент div со значением style.width, равным 20 %, я бы хотел вернуть объект с этим значением в процентах (конечно, 20 %), пикселях (какой бы ни была фактическая ширина пикселя), em, pt, ex, и т. д.

Я понимаю, что «процент» не является значением «длины», и что не все свойства, которые принимают значения длины, принимают проценты, но хотят также включить это.

конечно, некоторые значения будут зависеть конкретно от элемента и, возможно, от его положения в DOM (например, для получения значения em потребуется вычисленный размер шрифта родительского элемента как ну).

Я могу предположить, что стиль задан явно для элемента - я знаю, как получить текущий вычисленный стиль элемента - я просто надеюсь не повторять работу, которую, вероятно, уже сделал кто-то другой. мне также известен http://www.galasoft.ch/myjavascript/Web ... ength.html, но он основан на style.pixelWidth или node.clientWidth и не работает в Chrome (я предполагаю, что он не работает и в Safari... и, возможно, в других).

я уже разработал значения цвета (rgb, rgba, hex, name) — это, конечно, намного проще. я работаю со значениями, которые математически изменяемы, поэтому на самом деле мне нужны только значения «длина» и «процент» (если вызывается набор свойств со значением, отличным от длины и непроцентным, например «font-size: Large», функция может завершиться неудачей или выдать ошибку).

если написано процедурно, идеально было бы что-то вроде этого:

Код: Выделить всё

function getUnits(target, prop){
var value = // get target's computed style property value
// figure out what unit is being used natively, and it's values - for this e.g., 100px
var units = {};
units.pixel = 100;
units.percent = 50;  // e.g., if the prop was height and the parent was 200px tall
units.inch = 1.39;  // presumably units.pixel / 72 would work, but i'm not positive
units.point = units.inch / 72;
units.pica = units.point * 12;
// etc...
return units;
}

Я не прошу кого-то написать за меня код, но я надеюсь, что кто-то уже делал это раньше, и он доступен в какой-нибудь библиотеке с открытым исходным кодом, фреймворке, сообщении в блоге, тут же и т. д. в противном случае, если у кого-то есть умная идея, как упростить процесс, это тоже было бы здорово (автор ссылки выше создал временный элемент div и вычислил одно значение для определения соотношений для других единиц - удобная идея, но не та, которая меня полностью устраивает, и определенно такая, которая потребует дополнительной логики для обработки всего, что я надеюсь принять).

Заранее спасибо за любую информацию или предложения.

Подробнее здесь: https://stackoverflow.com/questions/451 ... -css-units