Question

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

<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'));

        }
    });
})

Answer 1

可以一次性完成。

只需定义引用其容器font-size的内部元素的font-size。

E.g：

<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来实现这个想法。

Answer 2

除了我以前的评论，这是我到目前为止所做的（再次，假设您无法修改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/。

Answer 3

您只需按一下按钮即可更改整页正文的字体大小，如下所示。这里我改变了字体大小的百分比。

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

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

 });

如果您想在每个按钮点击中更改每个元素大小，请按照以下编码..

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

Answer 4

试试这个

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

Answer 5

您的问题很不清楚（更改整页字体大小），而您的编码似乎针对特定的容器类别.parent＆＃39; childrenrens＆＃39;。

[信用到wared和Zaheer Ahmed]

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

.attr('style')

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

以下是您的解决方案jsFidled 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");
        }
    });
});

Answer 6

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

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

6 个答案: