设置html字体大小 js,js如何改变文章的字体大小

最近发现有许多朋友提问：使用js如何改变一篇文章的字体的大小？

小编查阅了相关文章，为大家整理了几个小案例，供大家参考，具体内容如下

效果图：

点击大、小按钮，随时切换字体大小

具体代码：

使用js如果改变一篇文章字体的大小

a{ text-decoration:none; color:#0C3}

a:hover{ color:#F36}

function changesize(size)

{

document.getElementById("article_content").style.fontSize =size+"px";

}

脚本之家
脚本之家欢迎您

好好学习 天天向上

大 小

再为大家分享一栗子：

这个工作原理很简单，就是在触发事件的时候将文章的字号改变，更直白一些就是改变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程序设计有所帮助。