javascript之点击按钮实现放大缩小字体

Posted 2020-06-16

<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>大家司机佛艰苦朴素金佛is大家欧赔金佛ID税击破皮肤简单介绍封IP而控盘放假搜客反对派</p>

    <p>大家司机佛艰苦朴素金佛is大家欧赔金佛ID税控盘放假搜客反对派</p>

    <p>大家司机佛艰苦朴素金佛is大家欧赔金佛ID税控盘放假搜客反对派</p>

    <p>大家司机佛艰苦朴素金佛is大家欧赔金佛ID税控盘放假搜客反对派</p>

</div>