How to apply css to all html elements in a div selector with jquery

Question

I need to apply css font-size by a jquery on click to every element under div selector. But I can't make them affect. This is how I tried.

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

As the detailed above. I need every <p> and <span> in div#reading_pane change the size on each a clicked.

Is this <a id="incfont">A+</font> <a id="decfont">A-</font> correct ? I guess the closing tags should be </a> ? — collab-with-tushar-raj
– collab-with-tushar-raj, Commented Oct 16, 2014 at 11:32
The code, when fixed (manually or by a browser’s error correction), works in the sense of increasing or decreasing some font size. But it is illogical, as it sets the childre’ns font size to 2 pixels larger than the parent size, whereas the decrease operates on the parent only (which is more natural). Please review your code, edit it, and if problems remain, explain exactly what you want to accomplish and how the code fails to do that. — Jukka K. Korpela
– Jukka K. Korpela, Commented Oct 16, 2014 at 11:44
@Regent, your demo works great. But when I apply it with my page. It's not work and I'm working on it to see why. — Wilf
– Wilf, Commented Oct 16, 2014 at 12:10

Community · Accepted Answer · 2017-05-23 10:25:58Z

1

The main problem is that .css('font-size') returns size in pixels, not in points. So, based on this question and avoiding code duplication it can be so:

Fiddle.

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

Note: I also modified HTML:

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

edited May 23, 2017 at 10:25

CommunityBot

11 silver badge

answered Oct 16, 2014 at 11:40

Regent

5,1743 gold badges23 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to apply css to all html elements in a div selector with jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related