jquery - 允许用户更改网页中的字体大小

Question

我希望能够改变网页中文本的大小，我猜可以使用 jQuery，但我没有 javascript 经验。

还有一个问题就是网页是一个phtml文件，使用了多个php echo命令。并且页面由多个phtml文件组成。

编辑:我想为用户提供 3 种不同字体大小的选择。

Answer 1

我将采用的方法是将字体大小百分比应用于 html 的 body 标记

body
{
    font-size: 62.5%;
}

然后为所有其他元素指定以 em 为单位的字体大小，它生成的大小是继承的字体大小的放大百分比

h1
{
    font-size: 1.8em;
}

p
{
    font-size: 1.2em;
}

我在 body 上使用 62.5%，因为在指定其他字体大小时很容易将其转换为像素大小，例如1.2em = 12px, 1.8em = 18px 等等

然后要以编程方式更改页面中的字体大小，您只需更改 body 上的 font-size 的值，页面的其余部分将相应地放大或缩小

你可以用三个div来测试

<div id="sizeUp">bigger text</div>
<div id="normal">normal text</div>
<div id="sizeDown">smaller text</div>

我相信在 JQuery 中你可以做到

$(document).ready(function() {

    $("#sizeUp").click(function() {

        $("body").css("font-size","70%");

    });

    $("#normal").click(function() {

        $("body").css("font-size","62.5%");

    })

    $("#sizeDown").click(function() {

        $("body").css("font-size","55%");

    })
});