jquery css default font size

Question

I have a form that allows the user to push an up or down button to resize the font in an element. When I reset the form I need to put the "default" font size back in a hidden field to send to a php script. So how can I get the css font size actually typed into the css stylesheet, not the one that has been altered by jquery?

Thank you, Todd

Where is the code that resizes it? What is the purpose of getting the default value, just to reset the presentation? — Control Freak
– Control Freak, Commented May 27, 2012 at 13:03

Stu Cox · Accepted Answer · 2012-05-27 13:12:49Z

2

The easiest way would be to store the original font size before you change it:

var originalFontSize = $myElement.css('font-size');

Then in your code for resetting the form:

$myHiddenElement.attr('value', originalFontSize);

You can access definitions within the actual stylesheet using Javascript - described here - but then you'd have to make all sorts of assumptions about where the relevant definition for your element is located and wouldn't take into account any browser-specific overrides etc. It's much easier to just grab the state of that element before you modify it.

answered May 27, 2012 at 13:12

Stu Cox

4,5272 gold badges27 silver badges28 bronze badges

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

2 Comments

maddogandnoriko Over a year ago

This is what I ended up doing but it seemed a little wrong. It is probably the easiest and most reliable. Thanks.

Stu Cox Over a year ago

@maddogandnoriko - See Steve's answer below - he's shown that setting the fontSize property to null reverts it to its stylesheet value. It might be more compatible across browsers to use jQuery's version of this, i.e. $myElement.css('font-size', '')

Steve · Accepted Answer · 2012-05-27 13:32:05Z

1

You can define the default font size in your css like so:

#myelement {
    font-size: 12;
}

Then you can override this value locally by using javascript

var element = document.getElementById('myelement');
element.style.fontSize = new_font_size;  // local values override the value from the stylesheet.

Then when you want to set it to the default

var element = document.getElementById('myelement');
element.style.fontSize = null; // now it reverts back to using the value defined in the stylesheet

answered May 27, 2012 at 13:32

Steve

2,3531 gold badge21 silver badges29 bronze badges

Comments

scorpio1441 · Accepted Answer · 2012-05-27 13:16:07Z

0

You need to set the default value in JS variable before changing font-size.

var defaultFontSize = 20;

And then use it to do reset.

answered May 27, 2012 at 13:16

scorpio1441

3,08810 gold badges42 silver badges79 bronze badges

2 Comments

maddogandnoriko Over a year ago

but then if I change it in the stylesheet down the road I will have to remember to change it in the js also....

maddogandnoriko Over a year ago

undetermined....but if I decide to change it a year from now I am likely to forget to change it in both places

Collectives™ on Stack Overflow

jquery css default font size

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related