CODEWITHSUNDEEP
javascriptjqueryfont-size
Trick
Trick

Reputation: 3849

Resize font with jQuery/JS and override font-size

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...

Upvotes: 0

Views: 2161

Answers (5)

Aram Mkrtchyan
Aram Mkrtchyan

Reputation: 2700

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

you only need to take all children of your div

Upvotes: 1

bevacqua
bevacqua

Reputation: 48476

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()?

Upvotes: 0

Andreas Louv
Andreas Louv

Reputation: 47099

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

Upvotes: 1

user8710
user8710

Reputation:

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

Upvotes: 0

tmaximini
tmaximini

Reputation: 8503

you could do something like:

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

Upvotes: 0

Related Questions