www.webdeveloper.com
Results 1 to 6 of 6

Thread: JavaScript accessing element style information

  1. #1
    Join Date
    Sep 2004
    Posts
    11

    JavaScript accessing element style information

    I am just starting to tinker with Javascript and CSS so sorry if this is a simple question.

    I have my CSS code in its own file and I am trying to use Javascript to access style information from a <DIV> tag that is pulling form this file. For some reason I am not getting any data back.

    Here is an example of my JS and HTML code.

    <SCRIPT language="JavaScript">
    var testObj = document.getElementByID("main_panel");
    window.alert(testObj.style.width);
    </SCRIPT>

    <BODY>
    <DIV id="main_panel">Test Text</DIV>
    <?BODY>

    My CSS file looks like this
    #main_panel { position: absolute;
    left: 160px;
    top: 110px;
    width: 480px;
    overflow: auto;
    visibility: visible;
    z-index: 1 }

    When I run the HTML I get an alert window but no text telling me the width of the object. This happens for any style element I try to access

    Any Help anyone could provide would be greatly appreciated!!!
    Last edited by MithrilRain; 09-09-2004 at 04:06 AM.

  2. #2
    Join Date
    Nov 2002
    Posts
    4,473
    The object you want to access must exist when you access it. Javascript is an interpreter, and inline statements are executed as they are read from the file. The DIV does not exist when the statement is executed. You must wait until the DIV is rendered. This is usually done using the onload event.
    Code:
    <SCRIPT language="JavaScript">
    window.onload = mytest;
    function mytest() {
      var testObj = document.getElementByID("main_panel");
      window.alert(testObj.style.width);
    }
    </SCRIPT>

  3. #3
    Join Date
    Aug 2004
    Location
    Derby, England
    Posts
    297
    For your information, note also the "offsetWidth" property, which contains the "calculated" width of the object in pixels.

    Also, note that the "offsetWidth" property is a direct property of the element.

    PHP Code:
    <SCRIPT language="JavaScript">
    window.onload mytest;
    function 
    mytest() {
      var 
    testObj document.getElementByID("main_panel");
      
    window.alert(testObj.style.width);
      
    window.alert(testObj.offsetWidth);
    }
    </SCRIPT> 
    Also, you will need to be wary of box models. In Mozilla the "width" sets and gets just the content with. In I.E. the "width" includes padding and border.

    - see:

    http://www.w3.org/TR/REC-CSS2/box.html
    http://webfx.eae.net/dhtml/boxsizing/boxsizing.html

  4. #4
    Join Date
    Sep 2004
    Posts
    11
    Thanks for your help all!!!!

    window.alert(testObj.offsetWidth);

    worked but

    window.alert(testObj.style.width);

    did not Any idea why? I would like to access other style information of the testObj.

    Once again any help that could be provided would be greatly appreciated!!

  5. #5
    Join Date
    Aug 2003
    Location
    In my house
    Posts
    4,004
    Originally posted by MithrilRain
    worked but

    window.alert(testObj.style.width);

    did not Any idea why? I would like to access other style information of the testObj.
    You may only access inline styles through the style property.

  6. #6
    Join Date
    Aug 2004
    Location
    Derby, England
    Posts
    297
    I think also that "testObj.style.width" did not work because the "width" property was set in a CSS style sheet rather than in the inline style object for the DIV itself.

    I.e.

    if you had

    <div style="width:100px>My Div</div> it should work.

    But as the width was in the CSS sheet, it cannot be accessed through the objects "style" property.

    "offsetWidth" works because that is a dynamic property, which shows the final calculated width, taking account of CSS styles, and specific object styles, etyc.

    There is also

    "currentStyle" (or in Mozilla I thing it is getComputedStyle()) which can I think access the CSS style object

    There is also (in IE only)

    "runtimeStyle" which is a temporary style which you can apply to an object, overriding all other objects only whilst the page is being displayed.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles