javascript - jQuery - 重置所有字体大小

Question

我正在编写一段代码，可以在单击时增加字体大小，在单击时减小字体大小并在单击时重置字体大小。我通过这种方式将其应用于所有字体:

function convertAndApplyFonts(y) {
    $("body").find("*").each(function () {

        if (y == 'increase') {
            $(this).css({
                "font-size": parseInt($(this).css("font-size")) + 1
            });
        }

        if (y == 'decrease') {
            $(this).css({
                "font-size": parseInt($(this).css("font-size")) - 1
            });
        }

        if (y == 'reset') {
            var i = 0;
            $(this).css({
                "font-size": array[i]
            });

            i++;
        }

    });
}

在代码的开头，我有一个具有原始大小的数组:

var array = [];

$("body").find("*").each(function () {
    array.push($(this).css("font-size"));
});

我的问题是我在开始时生成的数组与当我循环 y == Reset 时的元素不匹配。

我已经在我的第一个 foreach 和重置 foreach 中完成了 console.log() ，但它们的字体大小不匹配起来...我做错了什么？

我还尝试了以下方法:

$("html").css({"font-size": counter + "em"});

但这没有任何作用。

Answer 1

循环遍历所有元素以获得类似的结果根本不正确。

为什么不能使用rem而不是px？这对您和浏览器本身来说会容易得多。使用 rem 单位，您只需修改 html 标签(根元素)font-size，即可在一行代码中实现该行为，所有其他具有以 rem 而不是 px 表示的字体大小/填充等的元素将自动调整大小。