使用jquery在按钮点击事件中增加整个网页的字体大小

Increase font size of whole web page on button click event using jquery

本文关键字：网页 字体 增加 jquery 按钮 事件 使用      更新时间：2023-09-26

当用户点击增加按钮时，我想增加整个页面的字体大小。它将在当前字体大小的基础上增加。以下是示例代码：

<div class='parent' style='font-size:15px'>
    <div class='c1'>div 1</div>
    <div class='c2'>div 2</div>
    <div class='c3'>div 3</div>
    <div class='c4'>div 4</div>
    <table style="font-size:17px">
        <tr>
            <th>test 1</th>
            <th style='font-size:11px'><div>test 1.1</div><div style='font-size:22px'>test 1.2</div></th>
            <th>test 2</th>
        </tr>
    </table>
</div>

这是我的jquery代码，但它不能正常工作：

$(document).ready(function(){
    $('.parent').find('*').each(function(){
        curSize=$(this).css('font-size');
        arrCurSize=curSize.toUpperCase().split("PX");
        if(arrCurSize.length==2){
            //alert(arrCurSize[0]);
            $(this).css('font-size',((parseInt(arrCurSize[0])+2)+"PX"));
            //alert($(this).css('font-size'));
        }
    });
})

它可以在一次拍摄中完成。

只需参考其容器字体大小来定义内部元素的字体大小。

例如：

<div class="container">
   <p class="par1">text1: 15px at start</p>
   <p class="par2">text2: 17px at start</p>
</div>
--------------------------------------------
.container {font-size: 10px}
.par1 {font-size: 1.5em}
.par2 {font-size: 1.7em}

下面的标记为第一段15px，第二段17px。因为如果容器中设置的标准尺寸是10px，则转换率为：

  • 1em=10px//容器初始化
  • 1.5em=15px
  • 1.7em=17px
  • 。。。等等

现在，您可以更新所有字体大小定义，更新容器字体大小。

试试这个jsFiddle来发挥这个想法。

除了我之前的评论之外，以下是我到目前为止所做的内容（再次假设您不能修改HTML部分）：http://jsfiddle.net/wared/JWUt9/.这个解决方案有点脏，因为它添加了一个样式属性，并将额外的font-size数据绑定到选择器匹配的每个元素（在本例中为：p *）。此外，每次用户单击调整大小按钮时，我们都必须循环浏览整个集合。但是，它允许覆盖从非内联样式定义的固定大小。

如果我们能够控制非内联样式，我们可以手动用em单元替换所有固定大小，也可以通过javascript对内联固定大小进行同样的操作。最后，我们可以通过简单地修改容器的font-size属性来放大和缩小，并且子元素应该自动调整大小。下面是一个有趣的例子，我们可以从中开始（向下滚动到第一个codepen演示）：http://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/.

试试这个

$(this).css("font-size","+=2");

您只需点击按钮即可更改整个页面的字体大小，如下所示。在这里，我更改了字体大小的百分比。

$("#sizeUp").click(function() {
        $("body").css("font-size","70%");
 });

如果您想在每次单击按钮时更改每个元素的大小，请按照以下编码进行操作。。

  $('body *').each(function() {
      xsize= parseInt($(this).css('font-size')) + 1;    
        $(this).css('font-size', xsize+2);
  });

考虑为该功能格式化页面可能是最简单的。例如，使用固定的原始正文字体大小，并让所有元素使用字体大小百分比。然后，您可以简单地使用jQuery来设置正文字体大小，所有元素都会相应地进行调整。

您的问题很不清楚（更改整个页面的字体大小），而您的编码似乎针对特定的容器classed.parent'childrens'。

[归功于wared和Zaheer Ahmed]

您的编码很接近，但最简单的jQuery方法是使用.attr('style') 进行.test()

if (/font-size:[^;]+px/.test($(this).attr('style'))) {
        $(this).css("font-size","+=2");
    }

这是您的解决方案jsFidded Here:

$("#trigger").click(function() {
    /* the overall body tag for relative units */
    $("body").css("font-size","+=5%");
    /* targetting inlined font-size in pixels */     
    $('*').each(function (index, value) {
        if (/font-size:[^;]+px/.test($(this).attr('style'))) {
            $(this).css("font-size","+=2");
        }
    });
});
相关文章：