增加列表的字体大小答案

【问题标题】：Increasing font-size of list增加列表的字体大小
【发布时间】：2014-06-15 03:52:45
【问题描述】：

我做了以下事情。

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

【问题讨论】：

你可以看看here。使用 jQuery 的很好的例子。

标签： jquery jquery-selectors font-size

【解决方案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');
}

【讨论】：