作者:VI_宁小豆2502874431 | 来源:互联网 | 2022-01-26 00:32
这篇文章主要介绍了js改变文章字体大小的方法,大家在使用word文档时工具栏为大家提供更改字体大小的选项,那js是如何改变文章字体大小,下文为大家揭晓,需要的朋友可以参考下
最近发现有许多朋友提问:使用js如何改变一篇文章的字体的大小?
小编查阅了相关文章,为大家整理了几个小案例,供大家参考,具体内容如下
效果图:
点击大、小按钮,随时切换字体大小
具体代码:
再为大家分享一栗子:
这个工作原理很简单,就是在触发事件的时候将文章的字号改变,更直白一些就是改变font-size这个属性的值(jQuery版本1.7.2)
HTML
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程序设计有所帮助。