码迷,mamicode.com
首页 > Web开发 > 详细

网页字体大小控制

时间:2016-08-31 15:25:25      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网页字体大小</title>
<script src="jquery-1.4.2.js"></script>
<script type="text/javascript">
$(function(){
$("span").click(function(){
var thisEle=$("#para").css("font-size");
var textfontsize=parseFloat(thisEle,10);
var unit=thisEle.slice(-2);
var cName=$(this).attr("class");
if(cName=="bigger")
{
if(textfontsize<=22)
{
textfontsize+=2;
}
}
else if(cName=="smaller")
{
if(textfontsize>=12)
{
textfontsize-=2;
}
}

$("#para").css("font-size", textfontsize+unit);

});

 

});
</script>
<style>
.msgcpation span{display:inline-block;width:60px;height:30px;line-height:30px;background:#999;text-align:center;color:#fff;}
#para{font-size:14px;}
</style>

</head>

<body>
<div class="msg">
<div class="msgcpation">
<span class="bigger">放大</span>
<span class="smaller">缩小</span>
</div>
<div>
<p id="para">
dstdgdgdfgdg utut ssdf asdfasfd dstdgdgdfgdg utut ssdf <br/>
asdfasfd dstdgdgdfgdg utut ssdf asdfasfd dstdgdgdfgdg <br/>
utut ssdf asdfasfd

</p>
</div>
</div>

</body>
</html>

 

网页字体大小控制

标签:

原文地址:http://www.cnblogs.com/ll-taj/p/5825715.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!