使用 Jquery 实现字体大小转换

浏览数：36 / 时间：2015年06月09日

导入 jquery1.9.1.js 库

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">

  <link href="css/style.css" type="text/css" rel="stylesheet" />
  
    <script type="text/javascript" src="scripts/jquery-1.9.1.js"></script>
    <script type="text/javascript">
    	$(function(){
    		var initFontSize = 18;
    		function removeBlur(){
    			if(this.blur){
    				this.blur();
    			}
    		}
    		/* 改变字体大小 代码 */
    		$("#fontbtn1").bind("focus",removeBlur).click(function(){
    			$("#newstext").css("font-size",(++initFontSize)+"px");
    			return false;
    		});
    		$("#fontbtn2").bind("focus",removeBlur).click(function(){
    			$("#newstext").css("font-size",(--initFontSize)+"px");
    			return false;
    		});
    		
    	});
    </script>
    
</head>
<body>
        
       	<font color="#FF0000">【 字体 </font> <a href="#" id="fontbtn1" >大</a>
        <a href="#" id="fontbtn2">小</a> <font color="#FF0000"> 】</font>
        <br>
        
        <div id="newstext">
        Jquery是继prototype之后又一个优秀的Javascrip作文档.
        </div>
        <br>
</body>
</html>

style.css

a:link,a:visited{
            color:#FF0000;
            text-decoration: none;
        }
a:hover{
    color: #FF8800;
}
#newstext{
    width: 400px;
    border: #c0c0c0 solid 1px;
    padding: 10px;
}

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

使用 Jquery 实现字体大小转换