最近發現有許多朋友提問：使用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程序設計有所幫助。
新聞熱點
疑難解答
