如何使用jQuery将css应用于div选择器中的所有html元素

Question

我需要通过单击将jQuery的CSS font-size应用于div选择器下的每个元素。 但是我不能让他们产生影响。 这就是我尝试过的方式。

CSS

#reading_pane{
font-size:14pt;
}

HTML

<div id="reading_pane">
<p>this is a text</p>
<span>this is another text</span>
</div>
<a id="incfont">A+</a>
<a id="decfont">A-</a>

JavaScript的

  $(document).ready(function() { 
  $('#incfont').click(function(){    
        curSize= parseInt($('#reading_pane span, p').css('font-size')) + 2;
  if(curSize<=20)
        $('#reading_pane').css('font-size', curSize);
        });  
  $('#decfont').click(function(){    
        curSize= parseInt($('#reading_pane').css('font-size')) - 2;
  if(curSize>=12)
        $('#reading_pane').css('font-size', curSize);
        }); 
 });

如上文所述。 我需要每<p>和<span>在div#reading_pane更改每个大小a点击。

Answer 1

主要问题是.css('font-size')返回以像素为单位的大小，而不是以点为单位。 因此，基于此问题并避免代码重复，可以这样：

小提琴 。

$(document).ready(function()
{
    $('#incfont').click(function()
    {
        changeFontValue(2);
    });

    $('#decfont').click(function()
    {
        changeFontValue(-2);
    });

    function changeFontValue(difference)
    {
        var newSize = Math.round(parseInt($('#reading_pane').css('font-size')) * 72 / 96) + difference;
        if (newSize >= 12 && newSize <= 20)
        {
            $('#reading_pane').css('font-size', newSize + 'pt');
        }
    }
});

注意 ：我还修改了HTML：

<a id="incfont">A+</a>
<a id="decfont">A-</a>