element.style.fontSize does not return size

Question

I'm so defeated I'm prepared to suffer any abuse to find out why I can't do something as simple as get the onload function to tell me the body font size is 20pt. I've read till my eyes bleed, and everyone but me seems able to make the script below work.

But my #@!/%#! code vomits an alert box with the following:(I used two lines to be sure it wasn't a case problem)

[  ]
[undefined]

Actually, my goal was to use scritp that executed in the head section, or onload, to read the screen width, and set the body font size by formula. [Next try will be to leave the body tag out of the code, and have the script document.write() in a body tag with style specs that sets the body font size. This below was supposed to just be a warm up exercise.] Any and all help is appreciated.

<html>
  <head>
    <style>
      body {font-size:20pt;color:white;font-weight:bold;background:grey;}
    </style>

    <script type="text/javascript">
      onload=function(){
        alert("[ " + document.getElementsByTagName("body")[0].style.fontSize +" ]"
           +"\n[ " + document.getElementsByTagName("body")[0].style.fontsize + " ]");
      }
    </script>
  </head>
  <body>
    <div>Test Text</div>
  </body>
</html>

The following s is as far as I got with the help of comments below.

These both return font size.

getComputedStyle(document.body).fontSize
getComputedStyle(document.body).getPropertyValue('font-size')

But they throw errors when used to set font size

getComputedStyle(document.body).fontSize = "30pt";
getComputedStyle(document.body).setProperty("fontSize", "25pt", "important") ;

On the other hand, these both set new font size

document.body.style.fontSize = "200%";
document.getElementsByTagName("body")[0].style.fontSize = "400%";

But they both return a string of lenght 0 when asked for font size.

document.body.style.fontSize 
document.getElementsByTagName("body")[0].style.fontSize

Here's an onload function to confirm it with:

 onload=function(){
   var msg = "onload:\n";
   /* these both return font size.*/
   msg += "1. [ " + getComputedStyle(document.body).fontSize + "]\n";
   msg += "2. [ " + getComputedStyle(document.body).getPropertyValue('font-size') + "]\n";
   /* these both return a string of lenght 0.*/
   msg += "3. [ " + document.body.style.fontSize + "]\n"; 
   msg += "4. [ " + document.getElementsByTagName("body")[0].style.fontSize + "]\n"; 
     /*these both throw errors*/
     try { getComputedStyle(document.body).fontSize = "30pt";
   } catch (err) { msg += "5. [" + err.message + "]\n"; }
   try {getComputedStyle(document.body).setProperty("fontSize", "25pt", "important") ;
   } catch (err) { msg += "6. [" + err.message + "]\n"; }
   /*these both set new font size*/
   alert(msg);
   document.body.style.fontSize = "200%";
   setTimeout(function(){document.getElementsByTagName("body")[0].style.fontSize = "400%"},1500);
 }

There is obviously something I'm missing, but for now this works. Merry Christmas

score 3 · Accepted Answer · answered Dec 17 '14 at 03:23

3

You can just use document.body instead of having to use getElementsByTagName.
fontsize is improper capitalization; that's why your second alert is returning undefined.
If you want the font size of an element as specified by CSS, you have to use getComputedStyle:
```
alert(getComputedStyle(document.body).getPropertyValue('font-size'));
// => "20pt"
```
See the MDN docs for getComputedStyle here.

answered Dec 17 '14 at 03:23

tckmn

57,719
27
114
156

That works. I'm just not sure what object the getComputedStyle() method is called on. From above lack of reference I would have guessed window, but now that you provided the method name I find references to it as document.getComputedStyle(). I guess W3schools web site list of the document object methods isn't up to date, because it doesn't list it. That's a prob for another day. For now a great and simple solution. Thank you. – George Dec 17 '14 at 03:42
@George It's a property of `window` (as shown in the doc link I have posted). Please *never* use W3Schools! See http://w3fools.com. MDN is a much better resource (which is, again, linked in my answer). – tckmn Dec 17 '14 at 03:45
For those who follow: The above is great advice. So I can return to my initital problem - dynamically adjust body font size onresize. getComputedStyle() returns CSSStyleDeclaration. Per MDN it has a setProperty() method I hope works. But ... when I click on that method on the MDN web site, I get NOT FOUND. But if it works, I'll be back to post the solution. I've seen this general issue disscussed at higher levels everywhere, but I think a simple complete examample might help starters like me. Thanks again. – George Dec 17 '14 at 21:52
1

@George Once you have the font size and you have changed it to whatever you want, you can use `document.body.style.fontSize` to set it; no need to use `getComputedStyle` here. – tckmn Dec 17 '14 at 22:15

score 0 · Answer 2 · answered Dec 17 '14 at 03:24

0

Javascript cannot read CSS. What you need to do is define your font-size inline so Javascript can understand it. When you type:

document.getElementsByTagName("body")[0].style.fontSize

It is referring first to the element in the DOM. Style is an attribute of that element, and when using a stylesheet styling is formatted differently, not as an attribute. So what you need to do is:

<body style='font-size:20px'>
<!-- content -->
</body>

answered Dec 17 '14 at 03:24

Tai Kwangi Chicken

613
4
11

`Window.getComputedStyle()` queries CSS properties – Aweary Dec 17 '14 at 03:25

element.style.fontSize does not return size

2 Answers2