jquery - 字体增大/减小后，使页面上的元素重置为默认大小

Question

如何让页面上的元素在字体增大/减小后重置回默认值

我尝试了以下方法，但收效甚微(字体增大/减小有效):

jsfiddle

这是我的代码:

$(".resetFont").click(function () {
});

$(".increaseFont").click(function () {
    var fontSize = getFontSize();
    var newFontSize = fontSize + 1;
    setFontSize(newFontSize);
    return false;
});

$(".decreaseFont").click(function () {
    var fontSize = getFontSize();
    var newFontSize = fontSize - 1;
    setFontSize(newFontSize);
    return false;
});

function getFontSize() {
    var currentSize = $("html").css("font-size");
    var currentSizeNumber = parseFloat(currentSize, 12);
    if (currentSizeNumber > 24) {
        currentSizeNumber = 24;
    }
    if (currentSizeNumber < 10) {
        currentSizeNumber = 10;
    }
    return currentSizeNumber;
}

function setFontSize(size) {
    $("html").css("font-size", size);
    $(".actualSize").html(size);
}

Answer 1

var defaultFontSize = $('html').css('font-size');

$(".resetFont").click(function () {
    $('html').css('font-size', defaultFontSize);
});

Updated DEMO