Как я могу получить размер шрифта элемента, как это было установлено css

Question

Я пишу простой jQuery, чтобы изменить размер шрифта элемента на определенный процент. У меня проблема в том, что когда я получаю размер с помощью $ ('# el'). Css ('font-size') jQuery, он всегда возвращает значение в пикселях, даже если он установлен с помощью em. Когда я использую свойство el.style.font-size в Javscript, оно не будет возвращать значение, пока оно не будет явно установлено тем же свойством.

Есть ли какой-нибудь способ, которым я могу получить исходное значение размера шрифта, заданное CSS, с помощью Javascript? Насколько кроссбраузерен ваш метод?

Заранее спасибо!

Редактировать: Следует отметить, что все протестированные браузеры (см. Комментарий ниже) позволяют мне устанавливать размер текста, используя значение 'em', используя два метода, упомянутых выше, после чего jQuery .css () возвращает эквивалентное значение «px», а метод Javascript .style.fontSize возвращает правильное значение «em». Возможно, лучший способ сделать это - инициализировать элементы при загрузке страницы, сразу же присвоив им значение em.

Answer 1

Все ваши целевые браузеры, за исключением IE, сообщат вам "Computed Style" элемента. В вашем случае вы не хотите, чтобы знал, что вычисленный размер px предназначен для font-size, а скорее хотите, чтобы значение было установлено в ваших таблицах стилей.

Только IE может получить это право с помощью функции currentStyle. К сожалению, jQuery в этом случае работает против вас и даже заставляет IE сообщать вычисленный размер в px (для этого используется this hack Дином Эдвардсом, вы можете проверить источник самостоятельно).

Итак, в двух словах, то, что вы хотите, невозможно кросс-браузер. Только IE может сделать это (при условии, что вы обходите jQuery для доступа к свойству). Ваше решение установить значение inline (в отличие от таблицы стилей) - лучшее, что вы можете сделать, так как тогда браузеру не нужно ничего вычислять.

Answer 2

Этот плагин jQuery выглядит так, как будто он сделает свое дело:

Обновление: плагин jQuery для сохранения масштабируемых интерфейсов с преобразованием пиксель в эм

Github: jQuery-Pixel-Em-Converter

Answer 3

в Chrome:

var rules = window.getMatchedCSSRules(document.getElementById('target'))

возвращает объект CSSRuleList. Нужно немного поэкспериментировать с этим, но похоже, что если m < n, то CSSStyleRule в rules[n] переопределяет тот в rules[m]. Итак:

for(var i = rules.length - 1; i >= 0; --i) {
    if(rules[i].style.fontSize) {
        return /.*(em|ex|ch|rem|vh|vw|vmin|vmax|px|in|mm|cm|pt|pc|%)$/.exec(rules[i].style.fontSize)[1];
    }
}

В Firefox, возможно, используйте sheets = document.styleSheets, чтобы получить все ваши таблицы стилей как StyleSheetList, затем выполните итерации по каждому CSSStyleSheet sheet в sheets. Выполните итерацию по CSSStyleRule s в sheet (игнорируя CSSImportRule s) и протестируйте каждое правило с целевым элементом с помощью document.getElementById('target').querySelector(rule.selectorText). Затем примените то же регулярное выражение, что и выше ... но это всего лишь предположение, я не проверял его или что-то еще ...

Answer 4

однажды у меня была эта проблема. я использую эту функцию, чтобы получить значение int атрибута css, если оно есть.

function PBMtoInt(str)
{ 
return parseInt(str.replace(/([^0-9\.\-])+/,"")!=""?str.replace(/([^0-9\.\-])+/,""):"0");
}