网页字体大小

最新推荐文章于 2025-09-12 14:04:02 发布

转载最新推荐文章于 2025-09-12 14:04:02 发布 · 79 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/linjing-blog/p/6701415.html

文章标签：

#javascript #ViewUI

<!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>