CSS font-setting not carried thru to JScript code

decomplexity · 10-13-2012, 02:01 PM

Having looked at an utterly trivial problem for a couple hours with no resolution, I feel a complete fool

and would be grateful if someone would point out what is wrong - I cannot see the wood for trees. (I have boiled the more complex real problem down to its core code).

In summary:
- ID selector 'foo' is assigned a font-size in inline CSS.
- 'foo' is defined in the body as a DIV
- object element 'bar' is obtained by a getElementById (of 'foo') and it is being defined (i.e. is not null or undefined) - the first alert says so!
- if the commented-out line is uncommented, the second alert of 'bar.style.fontSize' correctly displays '4em'
- but if it remains commented out, nothing is diplayed. Why pls?

[CODE]
<html>
<head>

<style type="text/css">
#foo {font-size:1em;}
</style>

<script language="JavaScript" type="text/javascript">
function func(){
var bar = document.getElementById("foo");
alert(bar); // says 'bar' is an HTML Div element
//bar.style.fontSize = "4em" //if uncommented, the next alert says '4em'
alert(bar.style.fontSize);} // displays nothing!
</script>

</head>
<body onload="func()">

<div id="foo">
</div>

</body>
</html>
[CODE]

Old Pedant · 10-14-2012, 05:44 AM

In generall, styles set via CSS are *NOT* seen by JS code using OBJECTREF.style.property

Only those set via an inline style (or via other JS code) are seen.

To find the CSS-given style, you must use other coding. Look here:
http://www.javascriptkit.com/dhtmltu...cascade4.shtml

xelawho · 10-14-2012, 04:49 PM

There's a little problem with the computed style of font sizes, though - while IE will return the font size in the measurements in the css (in this case in em) firefox and Chrome actually compute its size and return that in px

Not that I'm offering a solution or anything. Just thought I'd point that out

Code:

<html>
<head>
<style type="text/css">
#foo {font-size:1em;}
</style>

</head>
<body>
<div id="foo">hello</div>
<script type="text/javascript">


function getStyle(el, cssprop){
 if (el.currentStyle) //IE
  return el.currentStyle[cssprop]
 else if (document.defaultView && document.defaultView.getComputedStyle) //Firefox
  return document.defaultView.getComputedStyle(el, "")[cssprop]
 else //try and get inline style
  return el.style[cssprop]
}


var bar = document.getElementById("foo");
bar.style.fontSize = "4em" 
alert(getStyle(bar, "fontSize")); // displays in px in FF and Chrome, in em in IE
</script>
</body>
</html>