常用的一个小样是,但是最近这些年很少有用的了;

 

代码如下;

CSS+HTML

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {font-size:16px}
#contentText{width: 900px;background: orange;}
</style>
</head>
<body>
<div id="contentText">
字体大小(方法一):
<div class=fontSize id=fs12 style="display:none">
<a href="javascript:doZoom(24)"></a>
<a href="javascript:doZoom(16)"></a>
<span></span>
</div>
<div class=fontSize id=fs16>
<a href="javascript:doZoom(24)"></a>
<span></span>
<a href="javascript:doZoom(12)"></a>
</div>
<div class=fontSize id=fs24 style="display:none">
<span></span>
<a href="javascript:doZoom(16)"></a>
<a href="javascript:doZoom(12)"></a>
</div>
<div>
<br/>
function $(idName) {//模拟jQuery选择器;
<br/>
return document.getElementById(idName);
<br/>
}
<br/>
//转换字号
<br/>
function doZoom(size){
<br/>
if(size==12){
<br/>

console.log("size==12");
<br/>

$("contentText").style.fontSize = size + "px";
<br/>
$("fs12").style.display = "";
<br/>
$("fs16").style.display = "none";
<br/>
$("fs24").style.display = "none";
<br/>
}
<br/>
if(size==16){
<br/>
console.log("size==16");
<br/>
$("contentText").style.fontSize = size + "px";
<br/>
<br/>
$("fs12").style.display = "none";
<br/>
$("fs16").style.display = "";
<br/>
$("fs24").style.display = "none";
<br/>
}
<br/>
if(size==24){
<br/>
console.log("size==24");
<br/>
$("contentText").style.fontSize = size + "px";
<br/>
$("fs12").style.display = "none";
<br/>
$("fs16").style.display = "none";
<br/>
$("fs24").style.display = "";
<br/>
}
<br/>
}
</div>
<p>字体大小(方法二):</p>
<a href="javascript:doZoomTwo(12)"></a>
<a href="javascript:doZoomTwo(14)"></a>
<a href="javascript:doZoomTwo(16)"></a>
<div>
代码如下:
<br/>
function doZoomTwo(size) {
<br/>
$("contentText").style.fontSize = size + 'px';
<br/>
}

</div>
</div>
</body>
</html>

 

JavaScript代码如下:


<script>
function $(idName) {//模拟jQuery选择器;
return document.getElementById(idName);
}
//转换字号
function doZoom(size){
if(size==12){
console.log("size==12");
$("contentText").style.fontSize = size + "px";
$("fs12").style.display = "";
$("fs16").style.display = "none";
$("fs24").style.display = "none";
}
if(size==16){
console.log("size==16");
$("contentText").style.fontSize = size + "px";
$("fs12").style.display = "none";
$("fs16").style.display = "";
$("fs24").style.display = "none";
}
if(size==24){
console.log("size==24");
$("contentText").style.fontSize = size + "px";
$("fs12").style.display = "none";
$("fs16").style.display = "none";
$("fs24").style.display = "";
}
}
//方法二;
function doZoomTwo(size) {
$("contentText").style.fontSize = size + 'px';
}
</script>