нужна помощь, чтобы получить значение с плавающей точкой CSS 'font-size'

Question

нужна помощь, чтобы получить значение с плавающей точкой CSS 'font-size'

0

Мне нужна помощь, чтобы получить float значение css 'font-size'. В firefox он работает отлично. У меня проблемы с Chrome, Safari, IE... Я пытаюсь получить это значение css, но без результата, оно преобразуется в значение int. Я проверяю два пути: с JQ и чистым JS:

Мой код:

alert('jq: '+$('#element').css('font-size')); // int value

var labelElement = document.getElementById('element');
var fontSize = parseFloat(window.getComputedStyle(labelElement, null).getPropertyValue('font-size'));
alert('pureJS: '+fontSize); // int value

Я беру снимок экрана из Chrome, в инструментах разработчика он видит размер шрифта в правильном значении.

Скриншот:

Кто-нибудь знает, почему это происходит?

Большое спасибо за любую информацию.

abibock_un 23 сен. 2013, в 17:03

Источник

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Scott Mermelstein · Accepted Answer · 2013-09-23T13-49-00.000Z

Сначала я подумал, что проблема заключается в том, что вы искали element вместо element-7, который отображается под мышью, и вы были смущены тем, что Chrome element.style показывает встроенную информацию CSS. Это поможет, если ваш образ будет соответствовать вашему коду.

Затем я протестировал в jsfiddle и увидел, что это не проблема. Проблема в том, что два способа, которыми вы смотрите на вещи, используют вычисленные значения. Пользовательский агент преобразует ваш размер шрифта в целое число, и если вы посмотрите на вычисленные значения, вы застряли в этом.

То, что делали инструменты разработчика Chrome, смотрело прямо на то, что вы ввели в DOM, а не на вычисленные значения. (Если вы посмотрите на этот div в скрипке или на свой собственный тест, вы увидите, что вычисленное значение для размера шрифта не совпадает с значением element.style.) Итак, сделайте то же самое и не смотрите на вычисленные значения:

alert(labelElement.style.fontSize);

дает вам то, что вы хотите. Вы можете сделать это в jQuery, но это на самом деле уродливее - вам нужно будет получить атрибут стиля, а затем проанализировать строковое alert($("element-7").attr("style"); будет первым шагом, но разбор того, чтобы получить размер шрифта, потребует гораздо больших усилий.

Я не нашел ничего в спецификациях css или html, которые говорят, что пользовательский агент должен обрабатывать пиксели с плавающей запятой. Все примеры, которые я вижу для размера шрифта в спецификации, использующей пиксели, используют целые числа. И я нашел блог от Джона Ресига, говорящий, что пиксели с плавающей запятой не являются практичными. Вот почему вы продолжаете получать возвращаемые значения int в качестве вычисленного значения - пиксели float не являются частью стандарта.

Огромное спасибо. Но проблема не в имени. Я использовал имя «элемента» только для примера, в реальном проекте он сгенерировал имя, и я получил идентификатор тега следующим образом: '$ (' # '+ child [i] .id) .attr (' id ')'
@abibock_un Я обновил свой ответ. Вы должны найти обновленный намного более полезным. :-)