Home > Article > Web Front-end > 一个实现字体大中小方法的JavaScript代码_文字特效

一个实现字体大中小方法的JavaScript代码_文字特效

WBOYOriginal: 2016-05-16 18:03:441352browse

<title>实现字体大中小的另一种方法</title> 
<style type="text/css"> 
 
</style> 
<script type="text/javascript"> 
function $(xixi) { 
return document.getElementById(xixi); 
} 
//转换字号 
function doZoom(size){ 
if(size==12){ 
$("contentText").style.fontSize = size + "px"; 
$("fs12").style.display = ""; 
$("fs14").style.display = "none"; 
$("fs16").style.display = "none"; 
} 
if(size==14){ 
$("contentText").style.fontSize = size + "px"; 
$("fs12").style.display = "none"; 
$("fs14").style.display = ""; 
$("fs16").style.display = "none"; 
} 
if(size==16){ 
$("contentText").style.fontSize = size + "px"; 
$("fs12").style.display = "none"; 
$("fs14").style.display = "none"; 
$("fs16").style.display = ""; 
} 
} 
</script> 
 
 
<div class="fontSize" id="fs12" style="DISPLAY: none">
<a href="javascript:doZoom(16)">大</a> <a href="javascript:doZoom(14)">中</a> <span>小</span>
</div> 
<div class="fontSize" id="fs14">
<a href="javascript:doZoom(16)">大</a> <span>中</span> <a href="javascript:doZoom(12)">小</a>
</div> 
<div class="fontSize" id="fs16" style="DISPLAY: none">
<span>大</span> <a href="javascript:doZoom(14)">中</a> <a href="javascript:doZoom(12)">小</a>
</div>

<div id="contentText">我是你的玫瑰花</div>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Jquery ajax传递复杂参数给WebService的实现代码_jqueryNext article：jquery学习笔记用jquery实现无刷新登录_jquery

See more

一个实现字体大中小方法的JavaScript代码_文字特效

Related articles