I'm trying to increase the font size of my page using a javascript function but it's not working. Is there a syntax problem with my code or is it not possible to do what I'm trying to do?
Javascript:
function changeFontSize(fontvar) {
var div = document.getElementById("webchat_history");
var currentFont = div.style.fontSize.value;
div.style.fontSize = currentFont + fontvar+ "px";
}
HTML:
<span onClick="changeFontSize(10);" style="font-size:16px;">Aa</span>
I want to increase it by x amount (fontvar) rather than specifying a specific font size because my font sizes are set in an external stylesheet. When/if I need to modify the stylesheets, I'd rather not have to update the Javascript too.
This script should work:
function changeFontSize(fontvar) {
var div = document.getElementById("webchat_history");
var currentFont = div.style.fontSize.replace("px", "");
div.style.fontSize = parseInt(currentFont) + parseInt(fontvar) + "px";
}
I found this amazing script: https://github.com/simplefocus/FlowType.JS
After additional debugging, I realized the "id" I was using, webchat_history
, was not actually an ID. It was the class for ID history
. I'm going to create additional classes and use document.getElementById('history').className = "webchat_history_medium";
to change font sizes.
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.