js如何改變文章的字體大小
更新時間：2016年01月08日 11:25:03 投稿：lijiao
這篇文章主要介紹了js改變文章字體大小的方法，大家在使用word文檔時工具欄為大家提供更改字體大小的選項，那js是如何改變文章字體大小，下文為大家揭曉，需要的朋友可以參考下
最近發(fā)現(xiàn)有許多朋友提問：使用js如何改變一篇文章的字體的大?。?/strong>
小編查閱了相關(guān)文章，為大家整理了幾個小案例，供大家參考，具體內(nèi)容如下
效果圖：
點(diǎn)擊大、小按鈕，隨時切換字體大小
具體代碼：
<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>好好學(xué)習(xí) 天天向上</div>
<a href="javascript:changesize('20')">大</a> <a href="javascript:changesize('12')">小</a>
</body>
</html>
再為大家分享一栗子：
這個工作原理很簡單，就是在觸發(fā)事件的時候?qū)⑽恼碌淖痔柛淖?，更直白一些就是改變font-size這個屬性的值（jQuery版本1.7.2）
HTML
<div class="box">
<div class="ctrl">
<a href="javascript:;">放大</a>
<a href="javascript:;">縮小</a>
<a href="javascript:;">默認(rèn)</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")); // 獲取原設(shè)定的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();
}
})
});
希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。
相關(guān)文章
JavaScript高階API數(shù)組reduce函數(shù)使用示例
這篇文章主要為大家介紹了JavaScript數(shù)組高階API?reduce函數(shù)使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要為大家介紹了uniapp解決軟鍵盤彈出問題方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
JavaScript中實現(xiàn)異步編程模式的4種方法
這篇文章主要介紹了JavaScript中實現(xiàn)異步編程模式的4種方法,本文講解了回調(diào)函數(shù)、事件監(jiān)聽、發(fā)布/訂閱、Promises對象4種方法,需要的朋友可以參考下2014-09-09
js中的window.open返回object的錯誤的解決方法
系統(tǒng)中用javascript中的window.open后，頁面返回了一個[object]。因為系統(tǒng)的原因，必需使用href="javascript:window.open()"這樣的格式。所以只能通過以下辦法解決。2009-08-08
這篇文章主要為大家詳細(xì)介紹了webpack常用配置項配置文件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
css的定位設(shè)置代碼2008-12-12
JS如何通過FileReader獲取.txt文件內(nèi)容
今天小編就為大家分享一篇JS如何通過FileReader獲取.txt文件內(nèi)容，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-12-12
Proxy是ES6新增的內(nèi)置對象,用于攔截并自定義對象的各種操作,通過定義攔截器,可以實現(xiàn)數(shù)據(jù)校驗和保護(hù)、日志記錄、數(shù)據(jù)綁定和觀察等功能2025-01-01
這篇文章主要為大家介紹了Three.js GLTF模型加載實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
JavaScript與Div對層定位和移動獲得坐標(biāo)的實現(xiàn)代碼
JavaScript與Div對層定位和移動獲得坐標(biāo)的實現(xiàn)代碼，需要的朋友可以參考下。2010-09-09