增大/減小頁面中所有元素的字體大小

Question

我的角度組件中有一段代碼：

    IncreaseFontSize()
    {
        let FontSize:any = document.body.style.fontSize;
        if(!FontSize)
        {
            FontSize = 1.4;
        }
        else
        {
            FontSize = parseFloat(FontSize);
        }
        document.body.style.fontSize = (FontSize+0.1) + 'rem';
    }


    DecreaseFontSize()
    {
        let FontSize:any = document.body.style.fontSize;
        if(!FontSize)
        {
            FontSize = 1.4;
        }
        else
        {
            FontSize = parseFloat(FontSize);
        }
        document.body.style.fontSize = (FontSize-0.1) + 'rem';
    }

單擊兩個按鈕可調用這些功能，但不會更改已為其定義了字體大小的元素的字體大小。

我需要增加/減少所有元素的字體大小 ，即，如果標簽的字體大小為12px，段落的字體大小為11px，div的字體大小為1.2rem，則在單擊時應將其字體大小增加0.1 rem。增加按鈕。

我應該如何進行？ 提前致謝。

Answer 1

嘗試這樣的事情。 您可以看到px的div不會增長，而其他的會增長。

 var fontSize = 16; function IncreaseFontSize() { fontSize = (fontSize + 1); document.body.style.fontSize = fontSize + 'px'; } function DecreaseFontSize() { fontSize = (fontSize - 1); document.body.style.fontSize = fontSize + 'px'; } 

 body, .font-constant { font-size: 16px; } .font-varies { font-size: 1em; } 

 <button onclick="IncreaseFontSize()">+</button> <button onclick="DecreaseFontSize()">-</button> <div class="font-varies"> Hello </div> <div class="font-constant"> how are you? </div>