js如何改变文章的字体大小
内容摘要
最近发现有许多朋友提问:使用js如何改变一篇文章的字体的大小?
小编查阅了相关文章,为大家整理了几个小案例,供大家参考,具体内容如下
效果图:
点击大、小按钮,随时切换字体大小
小编查阅了相关文章,为大家整理了几个小案例,供大家参考,具体内容如下
效果图:
点击大、小按钮,随时切换字体大小
文章正文
最近发现有许多朋友提问:使用js如何改变一篇文章的字体的大小?
小编查阅了相关文章,为大家整理了几个小案例,供大家参考,具体内容如下
效果图:
点击大、小按钮,随时切换字体大小
具体代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <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" >phpstudy<br/>phpstudy欢迎您<p>好好学习 天天向上</div> <a href= "javascript:changesize('20')" >大</a> <a href= "javascript:changesize('12')" >小</a> </body> </html> |
再为大家分享一栗子:
这个工作原理很简单,就是在触发事件的时候将文章的字号改变,更直白一些就是改变font-size这个属性的值(jQuery版本1.7.2)
HTML
1 2 3 4 5 6 7 8 | <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
1 2 3 4 5 | .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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | $( 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程序设计有所帮助。
代码注释