使用 JS 更改字体大小时忽略小数

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

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

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

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

Answer 2

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

字体大小可以是，并且可以是。是一个<数字> （带或不带小数点）紧跟单位标识符（例如，px、em 等）。
http://www.w3.org/TR/CSS21/fonts .html#font-size-props

CSS 3 表示“UA 应支持合理有用的范围和精度。”开放解释的措辞为“合理”和“有用”：
http://dev.w3.org/csswg/css3-values/#numeric -类型

Answer 3

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

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

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

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

查看小提琴以确定差异：http://jsfiddle.net/doktormolle /DMWhh/