Десятичное число игнорируется при изменении размера шрифта с помощью JS - PullRequest
Новая
       2

Десятичное число игнорируется при изменении размера шрифта с помощью JS

0 голосов
/ 24 января 2012

Я пытаюсь добавить некоторые функции изменения размера текста, используя этот код: 

$('#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. Если я увеличу снова, предупреждение currentValue (я пропустил предупреждение) говорит, что это 19px.

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

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

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

Спасибо

Ответы [ 3 ]

3 голосов
/ 24 января 2012

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

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

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

1 голос
/ 19 августа 2012

Рендеринг субпикселя несовместим между браузерами.

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

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

0 голосов
/ 24 января 2012 
$('#page-body').css('fontSize')

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

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

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

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

...