Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Software - Troubleshooting and Discussion > Developer Center > How to return current css fonSize in JS?

How to return current css fonSize in JS?
Thread Tools
DUNSEL
Forum Regular
Join Date: Feb 2004
Location: Manhattan
Status: Offline
Reply With Quote
Feb 15, 2004, 12:39 PM
 
I know other languages have a method like getFontSize() or similar, but does anyone know how to return the current css font size of an element in javascript?
I saw a woman with a sweatshirt that said "Guess", so I said, "Implants?"
     
Chris O'Brien
Grizzled Veteran
Join Date: Nov 2003
Location: Hebburn, UK
Status: Offline
Reply With Quote
Feb 15, 2004, 01:39 PM
 
Assuming the font size is set explicitly by something like
Code:
<div id="hi" style="font-size: 12px">hi there</div>
then just doing
Code:
var el = document.getElementById("hi").style.fontSize;
will work. if you just want the number rather than the string of '12px' just use parseInt().

I should note that Moz is a little bit smarter than Safari, because it allows you to obtain fontSize from setting style="font: 12px verdana" rather than having to use font-size: 12px like you need to in Safari. I did the above because it works in both Moz and Safari...

Hope that helps
Just who are Britain? What do they? Who is them? And why?

Formerly Black Book
     
DUNSEL  (op)
Forum Regular
Join Date: Feb 2004
Location: Manhattan
Status: Offline
Reply With Quote
Feb 15, 2004, 01:56 PM
 
Thanks mate, but that was the 1st thing I tried. No dice. Does the size have to be inline like that, or can it be in an embedded ss?
I saw a woman with a sweatshirt that said "Guess", so I said, "Implants?"
     
Synotic
Mac Elite
Join Date: Oct 2000
Status: Offline
Reply With Quote
Feb 15, 2004, 01:57 PM
 
This isn't directly answering your question since I don't know what you're trying to do but... in CSS you can use the "em" unit which is essentially the current font size. So making a box 5em when the font-size is 12px makes the box 60px wide, it also adapts whenever the user changes the font-size. But this may not be what your looking for so whatever
     
DUNSEL  (op)
Forum Regular
Join Date: Feb 2004
Location: Manhattan
Status: Offline
Reply With Quote
Feb 15, 2004, 02:05 PM
 
Yeah, apparently it does work, but only if the style rules are inline. Unfortunate.
I saw a woman with a sweatshirt that said "Guess", so I said, "Implants?"
     
Chris O'Brien
Grizzled Veteran
Join Date: Nov 2003
Location: Hebburn, UK
Status: Offline
Reply With Quote
Feb 15, 2004, 02:47 PM
 
So are you using classes to set the font size on each element? If so - I may have a solution. Try something like this:
Code:
function getFontSize(what) { var el = document.getElementById(what); var fs = el.style.fontSize; if (fs == "") { var cn = el.className; var ss = document.styleSheets; for (var i=0; i < ss.length; i++) { for (var j=0; j < ss[i].cssRules.length; j++) { if (ss[i].cssRules[j].selectorText.indexOf(cn) != -1) { fs = ss[i].cssRules[j].style.fontSize; break; } } } } return fs; }
so that in another function you can just do:
Code:
var el = getFontSize('some_elements_id');
It works in Safari 1.2 and Moz/firefox. Don't know about anything else, because I don't know their DOM support and can't test...

Obviously - the function will need extending if the element doesn't have a class associated with it - you'd need to go back up the document tree to find out where it inherits it's font size from...

Anyhoo - that was a nice little break from working. Hope it helps
Just who are Britain? What do they? Who is them? And why?

Formerly Black Book
     
DUNSEL  (op)
Forum Regular
Join Date: Feb 2004
Location: Manhattan
Status: Offline
Reply With Quote
Feb 15, 2004, 08:23 PM
 
Thanks, that's more work than it's worth, though. I managed to achieve the larger objective another way, which was to make font size dynamic depending on window size. Just thought if I could return the current font size easily, it would cut down the coding, but obviously not so. So instead I came up with a fading slideshow that works in browsers other than IE. IE has it's own built-in filter for that.
I saw a woman with a sweatshirt that said "Guess", so I said, "Implants?"
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 12:13 PM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,