网页字体大小
<!DOCTYPE html>
<html>
<head>
<title>网页字体大小</title>
<script type="text/javascript" src="js/jquery-3.2.0.min.js"></script>
<style type="text/css">
.msg{
width: 500px;
border:1px solid #666;
margin:0 auto;
padding: 10px;
}
.msg_caption{
height: 35px;
}
.msg_caption .bigger,.msg_caption .smaller{
background-color: blue;
padding: 0 10px;
color:#fff;
cursor:pointer;
}
</style>
</head>
<body>
<div class="msg">
<div class="msg_caption">
<span class="bigger">变大</span>
<span class="smaller">变小</span>
<span class="fontSize"></span>
</div>
<div>
<p id="para">
This is some text.This is some text.
This is some text.This is some text.
This is some text.This is some text.
This is some text.This is some text.
This is some text.This is some text.
This is some text.This is some text.
This is some text.This is some text.
This is some text.This is some text.
</p>
</div>
</div>
<script type="text/javascript">
$(function(){
$(".msg_caption span").click(function() {
$(".fontSize").remove();
var $thisEle=$("#para").css("font-size");//获取font-size的值
var $textFontSize=parseInt($thisEle,10);//用parseInt()方法去掉单位
var unit=$thisEle.slice(-2);//截取单位
var cName=$(this).attr("class");
if(cName == "bigger"){
if($textFontSize <=28)
$textFontSize +=2;
}else if(cName =="smaller"){
if($textFontSize >=12)
$textFontSize -=2;
}
$("#para").css("font-size",$textFontSize+unit);
$(".smaller").after("<span class='fontSize'>当前的字体是"+$textFontSize+unit+"号</span>")
});
})
</script>
</body>
</html>
注意：
1.parseInt()方法的第二个参数表示进制，代码中表示十进制。、
2.parseInt()方法返回字符串中从指定的字符开始的一个子字符串。
