Javascript 字体大小计算错误

我试着写一个简单的字体大小变换器。在我使用bootstrap框架之前，这一切都是完美的。 当我增大字体大小时，字体大小会减小。那是一种奇怪的行为

var baseFontSize;

(function () {
    "use strict";

    /*  Global variables */ 



    /*  jQuery Plugin: convert fontsize of a DOM element to em
    *
    *   usage: $( element ).pxToEm()
    *   returns a number rounded to 3 digits
    *
    */
    $.fn.pxToEM = function () {
        var fontSize = this.css("font-size"),
            value = /[^em|pt|px]*/g.exec(fontSize);
        return Number((value / baseFontSize).toFixed(3));
    };

}(jQuery));



$(document).ready(function () {
    "use strict";
    var body = $("#bodyid"),
        increaser = $("#font-sizer > ul > li:first-child"),
        decreaser = $("#font-sizer > ul > li:last-child"),
        maxFontSize = 2.0,
        minFontSize = 0.5;

    baseFontSize = parseFloat(body.css("font-size"));

    increaser.click(function (event) {
        var actualFontSize = body.pxToEM();
        actualFontSize += 0.1;
        if (actualFontSize > maxFontSize) {
            actualFontSize = maxFontSize;
        }
        body.css("font-size", actualFontSize + "em");
    });

    decreaser.click(function (event) {
        var actualFontSize = body.pxToEM();
        actualFontSize -= 0.1;
        if (actualFontSize < minFontSize) {
            actualFontSize = minFontSize;
        }
        body.css("font-size", actualFontSize + "em");
    });

});

我在代码中添加了一个fiddle链接

---

您假设文档中使用的所有大小都使用相同的单位。例如，如果主体有1em，并且元素的字体大小为16 px，那么函数pxToEm将返回16em

您需要基于元素单位进行转换

px到em的示例

1em/16px*元素字体大小（以px为单位）=产生em

---

您假设文档中使用的所有大小都使用相同的单位。例如，如果主体有1em，并且元素的字体大小为16 px，那么函数pxToEm将返回16em

您需要基于元素单位进行转换

px到em的示例

1em/16px*元素字体大小（以px为单位）=产生em

EM如以下所述： 此单位表示元素的计算字体大小。如果在font size属性本身上使用，则它表示元素的继承字体大小

这意味着元素em中的字体大小将取决于其父元素的字体大小

在你的小提琴里

正文字体大小为14px bodyid字体大小为16px 要计算bodyid字体大小，em需要基于其父级（在您的示例中为Body）进行计算。您的Fiddle使用bodyid作为基本字体大小。如果你用“body”来代替，它应该可以正常工作。 所需更改：

到

EM如以下所述： 此单位表示元素的计算字体大小。如果在font size属性本身上使用，则它表示元素的继承字体大小

这意味着元素em中的字体大小将取决于其父元素的字体大小

在你的小提琴里

正文字体大小为14px bodyid字体大小为16px 要计算bodyid字体大小，em需要基于其父级（在您的示例中为Body）进行计算。您的Fiddle使用bodyid作为基本字体大小。如果你用“body”来代替，它应该可以正常工作。 所需更改：

到

您可以将默认字体大小设置为em：

您可以将默认字体大小设置为em：

---

嘿，此方法不适用于1em以外的值。尝试使用1.1em或0.9em，递增和递减函数将显示意外行为。嘿，此方法不适用于1em以外的值。尝试使用1.1em或0.9em，增加和减少功能将显示意外行为。

baseFontSize = parseFloat(body.css("font-size"));

baseFontSize = parseFloat($('body').css("font-size"));

#bodyid {
    font-size: 1em;
}