Question

我正在尝试使用以下代码添加一些文本大小调整功能：

$('#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; }

由于

Answer 1

字体大小只能是整数个像素，因此当您设置font-size时，浏览器会将无效字体大小转换为可以使用的字体大小。下次你得到它，它是一个整数。

由于您要在ID标识的元素上设置字体大小，因此您应该将大小存储在变量中，并且只设置（永远不会获得）元素css字体大小。

例如，请参阅http://jsfiddle.net/Qfzpb/

Answer 2

浏览器之间的子像素渲染不一致。

字体大小可以是＆lt; length＆gt;，＆lt; length＆gt;是＆lt; number＆gt; （带或不带小数点）后面紧跟一个单元标识符（例如，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

Answer 3

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

这可能会返回不同的值（取决于使用的浏览器）。

通常（在现代浏览器中）jQuery使用getComputedStyle()获取值。这里返回的值是浏览器使用的值，而不是style-property设置的值。您可以改用：

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

请参阅小提琴以确定差异：http://jsfiddle.net/doktormolle/DMWhh/

使用JS更改字体大小时忽略十进制

3 个答案: