decomplexity
IS-IT--Management
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?
<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>
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?
<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>
