Js implementation dynamically changes the font size code

2020-03-30 01:14:21
OfStack

In many web sites in order to improve the user easy reading of text, provide with font size selection function, to adapt to the reading needs of different ages, in fact to implement this function also is very simple, is convenient to modify and font size up to you to decide, the default font size can be defined in the CSS page, generally is the standard font page 9 pt, which is 12 px;

Example code 1:


<!DOCTYPE html> 
<html> 
<head> 
<title> Modify font size .html</title> 

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 
<meta http-equiv="description" content="this is my page"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 

<!--<link rel="stylesheet" type="text/css" href="./styles.css">--> 
<style type="text/css"> 
div{ 
border:1px red solid; 
width:455px; 
font-size:16px; 
} 
.max{ 
font-size:20px; 
} 
.moren{ 
font-size:16px; 
} 
.min{ 
font-size:12px; 
} 
</style> 
<script type="text/javascript"> 
//This approach reduces the coupling between js and CSS
function changeFontSize(fontStyle){ 
//Get node object
var divNode = document.getElementsByTagName("div")[0]; 
//Sets the Name property of the node and the property value
divNode.className=fontSize; 
} 
/* 
function changeFontSize2(fontSize){ 
//Get node object
var divNode = document.getElementsByTagName("div")[0]; 
divNode.style.fontSize=fontSize; 
} 
*/ 
</script> 
</head> 

<body> 
<a href="javascript:void(0)" onclick="changeFontSize2('20px')" class="max"> large </a> 
<a href="javascript:void(0)" onclick="changeFontSize2('16px')" class="moren"> In no. </a> 
<a href="javascript:void(0)" onclick="changeFontSize2('12px')" class="min"> The trumpet </a> 
<div> 
 Here is the text displayed. Change the font size by clicking on the hyperlink above <br/> 
 Here is the text displayed. Change the font size by clicking on the hyperlink above <br/> 
 Here is the text displayed. Change the font size by clicking on the hyperlink above <br/> 
 Here is the text displayed. Change the font size by clicking on the hyperlink above <br/> 
 Here is the text displayed. Change the font size by clicking on the hyperlink above <br/> 
 Here is the text displayed. Change the font size by clicking on the hyperlink above <br/> 
 Here is the text displayed. Change the font size by clicking on the hyperlink above <br/> 
 Here is the text displayed. Change the font size by clicking on the hyperlink above <br/> 
 Here is the text displayed. Change the font size by clicking on the hyperlink above <br/> 
 Here is the text displayed. Change the font size by clicking on the hyperlink above <br/> 
 Here is the text displayed. Change the font size by clicking on the hyperlink above <br/> 
</div> 
</body> 
</html>

Example method 2:


<html>
<head>
<title>JavaScript Set web font </title>
<style>
body{
font-size:9pt;
}
</style>
</head>
<body>
<div id=zoom> This is a sample text, you can click below to select a font of different size, the text will change the size. Script house. </div>
<SCRIPT language=JavaScript>
function doZoom(size){
document.getElementById('zoom').style.fontSize=size+'pt'
}
</SCRIPT>
<P align=right> Select size: [ <A 
 href="javascript:doZoom(13)">13pt (large) </A> <A 
 href="javascript:doZoom(10.5)">10.5pt (medium) </A> <A 
 href="javascript:doZoom(9)">9pt (standard) </A> ]
</body>
</html>