Question

我做了以下事情。

在我的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标签，但它没有用。

Answer 1

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');
}

增加列表的字体大小

1 个答案: