JavaScript實現(xiàn)點擊按鈕字體放大、縮小
更新時間：2016年02月29日 12:02:52 作者：rehcf
字體可以調(diào)節(jié)大小，極大了滿足了用戶體驗度，接下來通過本文給大家介紹JavaScript實現(xiàn)點擊按鈕字體放大、縮小實例代碼，需要的朋友參考下吧
本文給大家分享js實現(xiàn)點擊按鈕字體放大縮小實例代碼，代碼簡單易懂，需要的朋友參考下吧
具體代碼如下所示：
<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(){//點擊按鈕增加（移除）樣式（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實現(xiàn)點擊按鈕字體放大、縮小的相關(guān)知識就給大家介紹這么多，希望對大家有所幫助！
相關(guān)文章
這篇文章主要介紹了js抽獎轉(zhuǎn)盤實現(xiàn)方法,結(jié)合實例形式分析了js抽獎轉(zhuǎn)盤原理、實現(xiàn)方法與操作注意事項,需要的朋友可以參考下2020-05-05
本文主要介紹了js獲取瀏覽器和屏幕的各種寬度高度的方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了JavaScript組合模式,結(jié)合具體案例形式分析了JavaScript組合模式定義、應(yīng)用與相關(guān)操作注意事項,需要的朋友可以參考下2020-05-05
本文主要介紹了webpack中的代理配置詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
下面小編就為大家?guī)硪黄?2個非常實用的JavaScript小技巧【推薦】。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
js 加載并解析XML字符串的實現(xiàn)代碼，需要的朋友可以參考下。2009-12-12
這篇文章主要為大家詳細(xì)介紹了JS制作網(wǎng)站吸頂條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
JavaScript字符串截取方法總結(jié)(slice、substring、substr等)
在開發(fā)中常常會需要截取字符串,而 JavaScript 提供了很多種方法實現(xiàn)截取操作,本文對各種方法做個整理,文中通過代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
這篇文章主要介紹了JavaScript插件化開發(fā)教程第四篇,需要的朋友可以參考下2015-01-01
控制瀏覽器全屏的方法有很多，下面為大家介紹下js是如何做到的2014-02-02