手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >js如何改变文章的字体大小
js如何改变文章的字体大小
摘要:最近发现有许多朋友提问:使用js如何改变一篇文章的字体的大小?小编查阅了相关文章,为大家整理了几个小案例,供大家参考,具体内容如下效果图:点...

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

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

效果图:

js如何改变文章的字体大小1

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

具体代码:

<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> <div> <a href="javascript:;">放大</a> <a href="javascript:;">缩小</a> <a href="javascript:;">默认</a> </div> <div>这里是一些文字</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程序设计有所帮助。

【js如何改变文章的字体大小】相关文章:

jQuery插件制作之参数用法实例分析

Javascript 字符串模板的简单实现

javascript改变和控制显示的图片大小

收集整理的四个方向的滚动

jQuery获取上传文件的名称的正则表达式

如何遍历对象的属性?

如何实现iframe(嵌入式帧)的自适应高度

js实现发送验证码后的倒计时功能

javasript实现密码的隐藏与显示

音乐播放用的的几个函数

精品推荐
分类导航