Maison > interface Web > js tutoriel > JavaScript implémente les compétences d'agrandissement et de réduction des polices en cliquant sur un bouton_javascript

JavaScript implémente les compétences d'agrandissement et de réduction des polices en cliquant sur un bouton_javascript

WBOY
Libérer: 2016-05-16 15:13:05
original
2608 Les gens l'ont consulté

Cet article partagera avec vous l'exemple de code js pour agrandir et réduire la taille de la police des boutons de clic. Le code est simple et facile à comprendre. Les amis qui en ont besoin peuvent s'y référer
.

Le code spécifique est le suivant :

<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>
Copier après la connexion

C'est toutes les connaissances sur l'utilisation de JavaScript pour agrandir et réduire la taille de la police des boutons de clic. J'espère que cela vous sera utile !

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal