js如何改变文章的字体大小
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
js如何改变⽂章的字体⼤⼩
最近发现有许多朋友提问：使⽤js如何改变⼀篇⽂章的字体的⼤⼩？
⼩编查阅了相关⽂章，为⼤家整理了⼏个⼩案例，供⼤家参考，具体内容如下
效果图：
点击⼤、⼩按钮，随时切换字体⼤⼩
具体代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>使⽤js如果改变⼀篇⽂章字体的⼤⼩</title>
</head>
<style type="text/css">
a{ text-decoration:none; color:#0C3}
a:hover{ color:#F36}
</style>
<body>
<script>
function changesize(size)
{
document.getElementById("article_content").style.fontSize =size+"px";
}
</script>
<div id="article_content"><br/>欢迎您<p>好好学习天天向上</div>
<a href="javascript:changesize('20')">⼤</a> <a href="javascript:changesize('12')">⼩</a>
</body>
</html>
再为⼤家分享⼀栗⼦：
这个⼯作原理很简单，就是在触发事件的时候将⽂章的字号改变，更直⽩⼀些就是改变font-size这个属性的值（jQuery版本1.7.2）
HTML
<div class="box">
<div class="ctrl">
<a href="javascript:;">放⼤</a>
<a href="javascript:;">缩⼩</a>
<a href="javascript:;">默认</a>
</div>
<div class="cont">这⾥是⼀些⽂字</div>
</div>
CSS
.box{text-align:center;}
.ctrl{padding:50px 0px 0px 0px;background:#f4f4f4;font-size:0px;border-bottom:3px solid #333;}
.ctrl a{display:inline-block;width:50px;height:30px;line-height:30px;background:#333;color:#fff;font-size:14px;}
.ctrl a:hover{background:#444;color:#fff;font-weight:700;text-decoration:none;}
.cont{padding-top:50px;font-size:14px;}
JS
$(function(){
function sizeIn(){
var sizeCont = parseInt($(".cont").css("fontSize")); // 获取原设定的font-size的值
if(sizeCont == 30){ // 判断font-size增⼤到30像素时停⽌
$(".cont").css({fontSize:sizeCont});
}else{
$(".cont").css({fontSize:sizeCont + 1});
}
}
function sizeOut(){
var sizeCont = parseInt($(".cont").css("fontSize"));
if(sizeCont == 10){ // 判断font-size减⼩到10像素时停⽌
$(".cont").css({fontSize:sizeCont});
}else{
$(".cont").css({fontSize:sizeCont - 1});
}
}
function sizeDefault(){
$(".cont").css({fontSize:""})
}
$(".ctrl a").click(function(){
if($(this).index() == 0){
sizeIn();
}else if($(this).index() == 1){
sizeOut();
}else{
sizeDefault();
}
})
});
希望本⽂所述对⼤家学习javascript程序设计有所帮助。