CodingForums.com - CSS font-setting not carried thru to JScript code

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - CSS font-setting not carried thru to JScript code (http://www.codingforums.com/showthread.php?t=276800)

CSS font-setting not carried thru to JScript code

Having looked at an utterly trivial problem for a couple hours with no resolution, I feel a complete fool :mad: 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]

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

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 :D

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>