本文给大家分享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方法)
//$('#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>

关于JavaScript实现点击按钮字体放大、缩小的相关知识就给大家介绍这么多,希望对大家有所帮助!

标签:
js点击字体放大缩小,js放大缩小按钮

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com

评论“JavaScript实现点击按钮字体放大、缩小”

暂无“JavaScript实现点击按钮字体放大、缩小”评论...

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。