JavaScript实现点击按钮字体放大、缩小
本文给大家分享js实现点击按钮字体放大缩小实例代码，代码简单易懂，需要的朋友参考下吧
具体代码如下所示：
<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方法）
//$('#switcherbutton').toggleClass('hidden');
//})
//字体的放大缩小
var$biger=$('div.large');
varnum=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>
<divid="switcher"class="switcher">
<h3>StyleSwitcher</h3>
<buttonid="switcher-default">Default</button>
<buttonid="switcher-hidden">Narrowhidden</button>
<buttonid="switcher-large">LargePrint</button>
<buttonid="switcher-bigger">switcher-bigger</button>
<buttonid="switcher-small">switcher-small</button>
</div>
<divclass="large">
<p>毛票票</p>
<p>毛票票</p>
<p>毛票票</p>
<p>毛票票</p>
</div>
关于JavaScript实现点击按钮字体放大、缩小的相关知识就给大家介绍这么多，希望对大家有所帮助！
热门推荐
10 八一幼儿祝福语大全简短
11 公司乔迁食堂祝福语简短
12 婚礼结束聚餐祝福语简短
13 儿媳买车妈妈祝福语简短
14 毕业送礼老师祝福语简短
15 同事辞职正常祝福语简短
16 恭贺新婚文案祝福语简短
17 金店立秋祝福语简短英文
18 婆婆高寿祝福语大全简短