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.
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.