<style>
.bb{color:red;}
.cc{color:green;}
.chapter {font-size: 1.5em;}
.normal{font-size:12px;}
.hidden{display:none;}
</style>
<script>
$(document).ready(function() {
$('div.aa').addClass('bb');
$('a[href^="http:"]').addClass('cc');
//$('#switcher-large').on('click',function(){
// $('div.large').addClass('chapter'); 
//});
$('#switcher-large').click(function(){ 
$('div.large').toggleClass('chapter');
$(this).toggleClass('bb'); 
});
//$('#switcher').click(function(){//點(diǎn)擊按鈕增加（移除）樣式（toggleClass方法）
//$('#switcher button').toggleClass('hidden');
//})
//字體的放大縮小
var $biger = $('div.large');
var num = parseFloat($biger.css('fontSize')); 
$('#switcher-bigger').click(function(){ 
num=num*1.4;
$biger.css('fontSize',num+'px');
});
$('#switcher-small').click(function(){
num=num/1.4;
$biger.css('fontSize',num+'px');
});
});
</script>
<div id="switcher" class="switcher">
<h3>Style Switcher</h3>
<button id="switcher-default"> Default </button>
<button id="switcher-hidden">Narrow hidden</button>
<button id="switcher-large">Large Print</button>
<button id="switcher-bigger">switcher-bigger</button>
<button id="switcher-small">switcher-small</button>
</div>
<div class="large">
<p>腳本之家</p>
<p>腳本之家</p>
<p>腳本之家</p>
<p>腳本之家</p>
</div>

關(guān)于JavaScript實(shí)現(xiàn)點(diǎn)擊按鈕字體放大、縮小的相關(guān)知識(shí)就給大家介紹這么多，希望對(duì)大家有所幫助！

您可能感興趣的文章:

相關(guān)文章

詳解js樹(shù)形控件—zTree使用總結(jié)
本篇文章主要介紹了js樹(shù)形控件—zTree使用總結(jié)，樹(shù)形控件的使用是應(yīng)用開(kāi)發(fā)過(guò)程中必不可少的。zTree 是一個(gè)依靠 jQuery 實(shí)現(xiàn)的多功能 “樹(shù)插件”。優(yōu)異的性能、靈活的配置、多種功能的組合是 zTree 最大優(yōu)點(diǎn).
2016-12-12
js+html制作簡(jiǎn)單驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了js結(jié)合html制作簡(jiǎn)單驗(yàn)證碼的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-02-02
鼠標(biāo)事件延時(shí)切換插件
為了防止誤操作，很多時(shí)候需要對(duì)鼠標(biāo)滑過(guò)觸發(fā)的事件進(jìn)行延時(shí)處理。網(wǎng)易首頁(yè)的選項(xiàng)卡好幾年之前就添加了這個(gè)特性，當(dāng)時(shí)我記得是采用150毫秒作為觸發(fā)基準(zhǔn)
2011-03-03
js 本地預(yù)覽的簡(jiǎn)單實(shí)現(xiàn)方法
本篇文章主要是對(duì)js本地預(yù)覽的簡(jiǎn)單實(shí)現(xiàn)方法進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
Flutter 超實(shí)用簡(jiǎn)單菜單彈出框 PopupMenuButton功能
這篇文章主要介紹了Flutter 超實(shí)用簡(jiǎn)單菜單彈出框 PopupMenuButton功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-08-08
CSS鼠標(biāo)響應(yīng)事件經(jīng)過(guò)、移動(dòng)、點(diǎn)擊示例介紹
本文為大家介紹下CSS 鼠標(biāo)響應(yīng)事件：鼠標(biāo)經(jīng)過(guò)CSS、鼠標(biāo)移動(dòng)CSS、鼠標(biāo)點(diǎn)擊CSS以及示例，喜歡的朋友可以參考下
2013-09-09
js的touch事件的實(shí)際引用
研究移動(dòng)端頁(yè)面的觸屏滑動(dòng)事件，搜索jquery 的相應(yīng)技術(shù)支持實(shí)在繁瑣，而js只需幾步簡(jiǎn)單定義即可，下面與大家分享下js的touch事件的實(shí)際引用
2014-10-10
使用canvas實(shí)現(xiàn)魔法攝像頭的示例代碼
我們用手機(jī)的攝像頭自拍,很容易實(shí)現(xiàn)簡(jiǎn)單的自拍效果,如復(fù)古、黑白等等,其實(shí)我們使用web端的JavaScript也是可以實(shí)現(xiàn)的,接下來(lái)就帶領(lǐng)小伙伴實(shí)現(xiàn)一個(gè)魔法攝像頭,并且提供了截圖下載功能,需要的朋友可以參考下
2023-08-08
詳解Js模板引擎（TrimPath）
本文詳細(xì)介紹了在頁(yè)面中引用template.js文件之后，具體的使用方法及實(shí)例，有需要的朋友可以參考下
2016-11-11
firefox TBODY 用js顯示和隱藏時(shí)出現(xiàn)錯(cuò)位的解決方法
今天幫別人寫(xiě)一個(gè)網(wǎng)頁(yè)，發(fā)現(xiàn)：當(dāng)用javascript動(dòng)態(tài)設(shè)置tr.style.display = "block"顯示某行時(shí)，使用IE瀏覽沒(méi)有問(wèn)題，但使用firefox瀏覽時(shí)該行被移到了其它行的后面，很是詫異。
2008-12-12