CODEWITHSUNDEEP
jquery
KutePHP
KutePHP

Reputation: 2236

set font size in jquery

I'm not able to change font size using Jquery. I want to change font size of a div. I have defined default font size for body as 12. I tried to change it as follows, but it didn't work :(

$("#SelFontSize").change(function(){
$("#"+styleTarget).css({'font-size':'"+$(this).val()+"px'});    
});

Upvotes: 29

Views: 123459

Answers (5)

Rewind
Rewind

Reputation: 2814

None of the above worked for me. I am using w3CSS (a bootstrap alternative) where stuff is quite hard to change.

I realised I needed !important, but the methods above did not work.

This is what worked (I needed 2vh as the font size, but you can have what you want, do not forget the "px" if you are using pixels):

$("#mydiv")[0].style.setProperty('font-size', "2vh", 'important');

Also, note that "important" in setProperty does not have the exclamation mark.

Upvotes: 0

Bipon Biswas
Bipon Biswas

Reputation: 11635

You can try another way like that:

<div class="content">
        Australia
    </div>

jQuery code:

$(".content").css({
    background: "#d1d1d1",
    fontSize: "30px"
})

Now you can add more css property as you want.

Upvotes: 2

husayt
husayt

Reputation: 15139

Not saying this is better, just another way:

$("#elem")[0].style.fontSize="20px";

Upvotes: 3

Anurag
Anurag

Reputation: 141859

Try:

$("#"+styleTarget).css({ 'font-size': $(this).val() });

By putting the value in quotes, it becomes a string, and "+$(this).val()+"px is definitely not close to a font value. There are a couple of ways of setting the style properties of an element:

Using a map:

$("#elem").css({
    fontSize: 20
});

Using key and value parameters:

All of these are valid.

$("#elem").css("fontSize", 20);
$("#elem").css("fontSize", "20px");
$("#elem").css("font-size", "20");
$("#elem").css("font-size", "20px");

You can replace "fontSize" with "font-size" but it will have to be quoted then.

Upvotes: 64

Sachin R
Sachin R

Reputation: 11876

$("#"+styleTarget).css('font-size', newFontSize);

Upvotes: 2

Related Questions