Десятичный игнорируется при изменении размера шрифта с JS

Я пытаюсь добавить некоторый текст изменения размера функциональность с помощью этого кода:Десятичный игнорируется при изменении размера шрифта с JS

$('#text-resize a').click(function(){ 
    var currentValue = $('#page-body').css('fontSize'); 
    var currentSize = parseFloat(currentValue, 10); 
    var fontUnit = currentValue.slice(-2); 
    var newSize = currentSize; 
    if ($(this).attr('rel') == 'decrease'){ 
     if (currentSize > 13){ 
      var newSize = currentSize/1.2; 
     } 
    } 
    else if ($(this).attr('rel') == 'increase'){ 
     if (currentSize < 19){ 
      var newSize = currentSize * 1.2; 
     } 
    } 
    else { 
     newSize = 1; 
     fontUnit = 'em'; 
    } 
    newSize += fontUnit; 
    $('#page-body').css('fontSize', newSize); 
    return false; 
});

Я знаю, что это не самый чистый код, но моя проблема заключается в том, что в какой-то момент (либо получение или установка размера шрифта для #page-body десятичных точек теряются.

Например, я начинаю со значения 16px (из моего файла CSS), и когда я увеличиваю его, он вычисляется до 19.2px.Если я снова увеличиваю, предупреждение о текущем значении (я забыл предупреждение) говорит, что это 19px.

Может ли кто-нибудь сказать мне, почему десятичные знаки игнорируются и как это предотвратить?

Если это помогает, моя стартовая CSS включает в себя:

body { font-size: 16px; } 
#page-body { font-size: 1em; }

Благодаря

источник

2012-01-24 heggsta

Вы используете '' var' для NewSize 'после его объявления; это не связано с проблемой, но это немного странно (и непоследовательно). –

Спасибо, что заметили, что Дэйв. – heggsta

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

Поскольку вы устанавливаете размер шрифта на элемент, идентифицированный идентификатором, вы должны сохранить размер в переменной и установить (никогда не получать) размер шрифта css элемента.

Например, см http://jsfiddle.net/Qfzpb/

источник

2012-01-24 03:45:59 Hamish

и теперь с анимацией: http://jsfiddle.net/Qfzpb/1/ – Hamish

Хорошо, анимация зарабатывает вам верх. Как указал Хэмиш, дробные значения пикселей не отображаются. Они могут быть установлены, но 19.4px будут отображаться как 19, а 19,5 будут отображаться как 20. Таким образом, вы можете использовать целые значения пикселей. – mrtsherman

Спасибо за ваш ответ Хэмиш, но ваш пример выглядит так, как будто он устанавливает и получает размер шрифта с десятичной запятой? Что мне не хватает? – heggsta

$('#page-body').css('fontSize')

Это может возвращать разные значения (в зависимости от используемого браузера).

Обычно (в современных браузерах) jQuery получает значение с помощью getComputedStyle(). Возвращаемое значение здесь - это значение, используемое браузером, а не значение, которое имеет свойство style. Вы можете использовать вместо этого:

var currentValue = document.getElementById('page-body').style.fontSize 
         || 
        $('#page-body').css('fontSize');

См скрипки, чтобы определить различие: http://jsfiddle.net/doktormolle/DMWhh/

источник

2012-01-24 06:02:48

Субпиксельной рендеринга противоречива между браузерами.

Размер шрифта может быть < длина > и < длина > является < номер > (с или без десятичной точки) немедленно следует идентификатор единицы измерения (например, точек, ет и т.д.). http://www.w3.org/TR/CSS21/fonts.html#font-size-props

CSS 3 говорит «UAs должен поддерживать достаточно полезные диапазоны и точности.» Открытые к интерпретации формулировка, как «разумные» и «полезно»: http://dev.w3.org/csswg/css3-values/#numeric-types

источник

2012-08-19 02:06:33 Garrett

Десятичный игнорируется при изменении размера шрифта с JS

ответ

Смежные вопросы