SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Zealot
    Join Date
    Dec 2002
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Extarcting style element width

    Hi .

    For example I have this style:

    .test {
    width:150px;
    }

    is there a way to write javascript code to extract the value of "test" width ?

    Thanks

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not sure about extracting it from the CSS itself, however can't you simply check the width of any page elements that are using that class?

    F'rinstance, if you've got the following div:
    Code:
    <div id="mydiv" class="test">Hello world</div>
    Then find out the width of the div (and therefore the CSS setting) using:
    Code:
    var mydivWidth=document.getElementById('mydiv').style.width;
    Andy
    From the English nation to a US location.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Here's a useful link.

    http://www.javascriptkit.com/dhtmltu...lcascade.shtml

    I think you may need to use something like this to find the width of an element with an ID of test:
    Code:
    <script type="text/javascript">
    var x=document.getElementById('test');
    alert(x.currentStyle.width);
    </script>
    But then I never was much good at javascript .

    Paul

  4. #4
    SitePoint Zealot
    Join Date
    Dec 2002
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your replay.
    Let me clear my idea, I want to get the width of one element from a style sheet and use its value and assign it to other element using expression in css such as:

    Code:
     #main {
    width:100px;
    } 
    #test{
    width: expression(document.getElementById('main').style.width+150+"px");
    }
    This code is not working. Is there a way to achieve this goal ?

    Thanks,,

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    You can't mix javascript expressions with the stylesheet.

    I think you'd have to something like this ; (although as I mentioned before my javscript is pretty basic.)
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    #main {
    width:100px;
    background:red;
    } 
    #test{
    width: auto;
    background:yellow;
    }
    </style>
    </head>
    <body>
    <div id="main">This is 100px wide</div>
    <div id="test">This is 250px wide</div>
    <script type="text/javascript">
    var x=document.getElementById('main').currentStyle.width;
    x=parseInt(x, 10) + 150;
    x=x+"px";
    document.getElementById('test').style.width=x;
    </script>
    </body>
    Paul

  6. #6
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's the kind of thing I was suggesting above, although not very clearly apparently
    From the English nation to a US location.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,
    That's the kind of thing I was suggesting above, although not very clearly apparently
    I knew what you meant That's why I copied it

    Paul

  8. #8
    SitePoint Zealot
    Join Date
    Dec 2002
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your comments,

    I use this
    Code:
     <style>
    #main {
    width:100px;
    background: Aqua;
    } 
    #test{
    width: expression(document.body.clientWidth/2 +"px" );
    background: Fuchsia;
    }
    
    </style>
    And Its works fine and I thought that I can access to stylesheet elements properties such as width and height.

    So is there a way to define vaiables is css like I define variable x and assign it to 100

    x= 100

    Then I use it in stylesheet without using javascript -Just using exprerssion-
    Code:
     <style>
    
    #test{
    width: expression(x+100+"px" );
    background: Fuchsia;
    }
    
    </style>
    Thank you

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,868
    Mentioned
    159 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Sorry i'd forgotton about IE's expressions (as I've never used them).

    I can't offer any advice but there might be something useful on this page for you:

    http://msdn.microsoft.com/library/de...dude061198.asp

    Paul

  10. #10
    SitePoint Zealot
    Join Date
    Dec 2002
    Posts
    106
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks all for your help


Bookmarks

Posting Permissions

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