首页 > Web开发 > 详细

网页字体大小控制

时间:2016-08-31 15:24:12      阅读:226      评论: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

(1)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!