javascript - 使用 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 的值开始(来 self 的 CSS 文件)，当我增加它时，它被计算为 19.2px。如果我再次增加，currentValue 的警告(我已经省略了警告)说它是 19px。

谁能告诉我为什么忽略小数位以及如何防止这种情况发生？

如果有帮助，我的起始 CSS 包括:

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

谢谢

Answer 1

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

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

例如，参见 http://jsfiddle.net/Qfzpb/