增大/减小页面中所有元素的字体大小

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>