使用 Jquery 实现字体大小转换

最新推荐文章于 2024-07-11 15:03:45 发布

u013497151

最新推荐文章于 2024-07-11 15:03:45 发布

阅读量1.8k

点赞数

分类专栏： JavaScript Learn_Web

本文链接：https://blog.csdn.net/wjw0130/article/details/44040075

版权

Learn_Web 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

JavaScript

25 篇文章 0 订阅

订阅专栏

导入 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;
}