使用jquery增加按鈕單擊事件的整個網頁的字體大小

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引用其容器字體大小。

例如：

<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- 尺寸/ 。

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'childrens'。

[ 對戰和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來設置正文字體大小，並且所有元素都會相應地進行調整。