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