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

前端之家收集整理的这篇文章主要介绍了JavaScript实现点击按钮字体放大、缩小前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

本文给大家分享js实现点击按钮字体放大缩小实例代码代码简单易懂,需要的朋友参考下吧

具体代码如下所示:

.bb{color:red;} .cc{color:green;} .chapter {font-size: 1.5em;} .normal{font-size:12px;} .hidden{display:none;} @H_502_6@ $(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'); }); });
Style Switcher
编程之家

编程之家

编程之家

编程之家

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

猜你在找的JavaScript相关文章