2014-04-29 172 views
0

我已完成以下操作。增加列表的字體大小

在我的HTML我已經定義了一個列表,

<ul id="fruits"> 
    <li>Apple</li> 
    <li>Oranges</li> 
    <li>Guava</li> 
</ul> 

<input type="submit" id="big" value="Bigger" /> 
<input type="submit" id="small" value="Smaller" /> 

在我的JavaScript文件,我已經寫代碼來增加和減少的列表項的字體大小,但它無法正常工作。

function change_size(element,sizeName){ 

var current_size=parseInt(element.css('font-size')); 
if(sizeName == 'smaller') 
var new_size=0; 
{ 
    new_size=current_size-4; 
} 
else 
{ 
    new_size=current_size+4; 
} 

element.css('font-size',new_size+'px'); 

} 

$('#big').click(function(){ 
    change_size($('#fruits'),'bigger'); 
}) 

$('#small').click(function(){ 
    change_size($('#fruits'),'smaller'); 
}) 

我甚至在change_size裏面試過li標籤,但它沒有工作。

+0

你可以看看[這裏](http://www.programming-free.com/2013/12/increase-decrease-font-size-jquery.html) 。很好的例子使用jQuery。 –

回答

3

Fiddle Demo

change_size($('#fruits'), 'bigger'); 
//   ^add missing (


您可以優化 change_size功能這樣。

Fiddle Demo

function change_size(element, sizeName) { 
    var current_size = parseInt(element.css('font-size')), 
     new_size = (sizeName == 'smaller') ? current_size - 4 : current_size + 4; 
    element.css('font-size', new_size + 'px'); 
}