简要咨询咨询QQ网站导航网站搜索手机站点联系我们设为首页加入收藏 

JavaScript实现点击按钮字体放大-缩小

来源:易贤网   阅读:2433 次  日期:2016-08-04 16:06:40

温馨提示:易贤网小编为您整理了“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方法)

//$('#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实现点击按钮字体放大、缩小的相关知识就给大家介绍这么多,希望对大家有所帮助!

更多信息请查看网络编程
点此处就本文及相关问题在本站进行非正式的简要咨询(便捷快速)】     【点此处查询各地各类考试咨询QQ号码及交流群
上一篇:基于JavaScript实现百叶窗动画效果不只单纯flas可以实现
下一篇:理解js回收机制通俗易懂版
易贤网手机网站地址:JavaScript实现点击按钮字体放大-缩小
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!