Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Location
    Rutland (county), UK
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    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 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]

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,189
    Thanks
    75
    Thanked 4,341 Times in 4,307 Posts
    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
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,920
    Thanks
    56
    Thanked 547 Times in 544 Posts
    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>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •