如何使用单个按钮切换文本大小？
在14pt和16pt之间切换会很酷.
谢谢
示例'两个按钮无切换'
<!DOCTYPE html PUBLIC ">
<head>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type='text/javascript'>
$(function(){
$('input').click(function(){
var ourText = $('p');
var currFontSize = ourText.css('fontSize');
var finalNum = parseFloat(currFontSize, 10);
var stringEnding = currFontSize.slice(-2);
if(this.id == 'large') {
finalNum *= 1.2;
}
else if (this.id == 'small'){
finalNum /=1.2;
}
ourText.css('fontSize', finalNum + stringEnding);
});
});
</script>
</head>
<body>
<h2>Toggle Text jQuery Single Button? </h2>
<!--NEED A SINGLE BUTTON TOGGLE-->
<input type='button' value='< text small' id='small' />
<input type='button' value='text large>' id='large' />
<p>My Text!!!</p>
</body>
</html>
var fontSizes = [14, 16];
$('input').click(function() {
$('p').css('font-size', fontSizes[0] + 'pt');
fontSizes.reverse();
})
或者,使用CSS:
<style type="text/css">
p {
font-size: 14pt;
}
p.larger {
font-size: 16pt;
}
</style>
<script>
$('input').click(function() {
$('p').toggleClass('larger');
})
</script>