font resizing using jQuery

Question

I have a span with the id of mySpan. I am trying to change the font-size of it via jquery like this:

$("#mySpan").css("font-size", "50px");

I have also tried this

$("#mySpan").css("font-size", 50+"px");

But nothing happens, I can change the color of the span like this:

$("#mySpan").css("color","#ff0000");

What am I doing wrong?

Works fine here jsfiddle.net/YdERS Is it wrapped with DOM ready handler? jQuery loaded? any errors in console? — Anton
– Anton, Commented Mar 3, 2014 at 14:21
Wrap your code in DOM Ready $(function(){ $("#mySpan").css("color","#ff0000"); }) — Tushar Gupta - curioustushar
– Tushar Gupta - curioustushar, Commented Mar 3, 2014 at 14:22
Do "inspect element" and then go through the applied styles. You should see your new size crossed out and the actual size in a css file or style tag somewhere. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Mar 3, 2014 at 14:25

zozo · Accepted Answer · 2014-03-03 14:29:42Z

2

Your code is ok, as for the problem, I will go in a wild guess (not so wild actually), that you have another value that overwrites it (for example a class with font-size: xxPx !important), or a child element with font-size defined, etc.

Also Anoop Joshi has a good point. That may be also an issue.

Another possibility would be a broken mark-up (like 2 elements with same id - #mySpan). In this case, the selector would return only the first one, and modify it's font, while leaving the second unchanged.

edited Mar 3, 2014 at 14:29

answered Mar 3, 2014 at 14:22

zozo

8,64019 gold badges83 silver badges142 bronze badges

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

3 Comments

A. Wolff Over a year ago

+1 but as OP said in question $("#mySpan").css("color","#ff0000"); works, ready handler is not the issue ;) I guess you are right saying CSS rule is overwritten but other rule

zozo Over a year ago

True, but it may help other ppl that have that issue, so I still see it as a valid point.

A. Wolff Over a year ago

You are correct, better is to be as much as descriptive as possible

Anoop Joshi P · Accepted Answer · 2014-03-03 14:22:29Z

2

Its working fine. Try to give it in document.ready

 $(document).ready(function () {
        $("#mySpan").css("font-size", "50px");
    });

answered Mar 3, 2014 at 14:22

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

Comments

JF it · Accepted Answer · 2014-03-03 14:28:35Z

1

Pretty sure the only reason the top one wouldn't work there is because its being overwritten by some other CSS Style..

Try this:

 $("#mySpan").css("font-size", "50px !important;");

the keyword important will force this to use instead of some other css that is overwriting your change.

UPDATE: Didn't know that (.css doesnt support important) so instead going to put it in a class and add class to myspan:

CSS:

.fontSizeFifty
 {  font-size: 50px !important; }

JQuery:

$('#mySpan').addClass('fontSizeFifty');

edited Mar 3, 2014 at 14:28

answered Mar 3, 2014 at 14:23

JF it

2,3833 gold badges23 silver badges30 bronze badges

3 Comments

A. Wolff Over a year ago

no, css() method doesn't support !important statement

JF it Over a year ago

Had no idea.. Thanks Wolff

A. Wolff Over a year ago

IMHO, using class should always be the preferred method to set style +1

Reinstate Monica Cellio · Accepted Answer · 2014-03-03 14:30:11Z

0

This should resolve your issue, but I'd much rather have more information and do it in a more correct manner...

var mySpan = $("#mySpan")[0]
var style = mySpan.style;
style += (style != "" ? ";" : "") + "font-size:50px !important;";
mySpan.style = style;

That will append the new font size directly into the style tag of the selected element, along with !important, which should override any styles anywhere else.

This is ugly and I'd never use it myself if there were any other way. Finding and fixing the originally applied style would be a better way, but if that's not possible then you have this.

answered Mar 3, 2014 at 14:30

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

Collectives™ on Stack Overflow

font resizing using jQuery

4 Answers 4

3 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related