Resize font with jQuery/JS and override font-size

Question

For example, if I have:

<div id="divtochangeFont">
    <p>This will change font size</p>
    <p stlye="font-size: 10px">This will not change font size</p>
</div>

Now I want to resize font with jQuery in all div content. For example, with simple jQuery:

$("#divtochangeFont").css("font-size","16px");

But it changes only in first paragraph. How to override all defined font-size attributes in div?

PS: Scale effect can't be used...

have you tried $("#divtochangeFont p").css("font-size","16px"); ? — Infra Stank, Dec 26 '11 at 12:35
I'd be worried if your browser interpreted `stlye` as `style`. — alex, Dec 26 '11 at 12:38

score 1 · Answer 1 · answered Dec 26 '11 at 12:45

1

$("#divtochangeFont, #divtochangeFont *").css("font-size", "16px");

answered Dec 26 '11 at 12:45

Andreas Louv

44,338
13
91
116

score 1 · Accepted Answer · answered Dec 26 '11 at 12:47

1

$("#divtochangeFont * ").css({"font-size": "16px","color": "orange"});

you only need to take all children of your div

answered Dec 26 '11 at 12:47

Aram Mkrtchyan

2,615
3
29
42

1

What about if there isn't any children - Just text? – Andreas Louv Dec 26 '11 at 12:57
if there isn't children $("#divtochangeFont, #divtochangeFont * "). – Aram Mkrtchyan Dec 26 '11 at 13:03

score 0 · Answer 3 · answered Dec 26 '11 at 12:37

0

you could do something like:

$("#divtochangeFont").css("font-size","16px");
$("#divtochangeFont").children().each(function () {
  $(this).css("font-size","16px");
});

answered Dec 26 '11 at 12:37

tmaximini

8,284
6
45
68

score 0 · Answer 4 · answered Dec 26 '11 at 12:44

Since you're setting the font on the parent div, the child p with a font-size of 10px has precedence for that paragraph. (That's the cascading in CSS.)

What frank blizzard suggests will work. Personally, I'd just change your selector if #divtochangeFont only contains p's.

$("#divtochangeFont p").css("font-size","16px");

score 0 · Answer 5 · edited May 23 '17 at 11:55

0

Try something like this, so you won't need to worry about other elements

$("#divtochangeFont").addClass("important").css("font-size","16px");

How to apply !important using .css()?

edited May 23 '17 at 11:55

Community

1
1

answered Dec 26 '11 at 12:45

bevacqua

45,496
53
165
281

Resize font with jQuery/JS and override font-size

5 Answers5