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

Question

I have a piece of code in my angular component:

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

These functions are called upon clicking two buttons, but it is not changing the font size of elements which have a font size already defined for them.

I need to increase/decrease the font size of all elements , ie if a label has font size 12px, a paragraph with font size of 11px, a div with font size 1.2rem the should increase their font size by 0.1 rem on click of the increase button.

How should I proceed with the approach? Thanks in advance.

Answer 1

Try something like this. You can see the div with px does not grow, while other one does.

 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>