Strict mode; offsetWidth versus style.width calculations

Discussion in 'Javascript' started by jdlwright@gmail.com, Apr 27, 2006.

  1. Guest

    Hi, I need to place a DIV exactly over a textarea element, but I can't
    calculate the correct value that I should set style.width to, because
    offsetWidth and style.width are calculated differently under strict
    mode.

    Under strict mode, offsetWidth returns the width of an element plus
    it's padding and border (i.e. just the same as quirks mode).

    Whereas, under strict mode style.width doesn't include padding or
    border widths.


    Is there any way to figure out the padding + border width for an
    element, so that I can subtract them from offsetWidth?


    Here's a simple page that illustrates my problem (note when viewing
    under strict mode, the red DIV doesn't line up with the textarea,
    however under quirks mode it does line up).

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <HTML>
    <HEAD>
    <style>
    .box{

    border:1px solid red;
    padding: 2px;

    }
    </style>

    <script type='text/javascript'>
    window.onload = function(){
    document.getElementById('d').style.width =
    document.getElementById('t').offsetWidth+"px";
    document.getElementById('d').style.height =
    document.getElementById('t').offsetHeight+"px";
    }
    </script>
    </head>


    <body >

    <textarea id='t' style="z-index:100; width: 200px; height: 210px;
    position:absolute; left:50px; top:200px; padding: 2px;"></textarea>

    <div class="box" id='d' style="position:absolute; left:50px;
    top:200px;z-index:101; ">

    </div>
    </body>
    </html>


    I should state that;
    a) the padding of the textarea and div could be set to anything, and
    may be set with inline style or a stylesheet, or not specified at all.
    b) I can't force the DIV padding to zero.


    If anyone has any ideas, please post and you'll at least have my
    gratitude!

    Thanks
    Jim
    , Apr 27, 2006
    #1
    1. Advertising

  2. marss Guest

    > Is there any way to figure out the padding + border width for an
    > element, so that I can subtract them from offsetWidth?


    If value of style set via imported or inlined style sheet you can get
    it through "currentStyle" (IE) or "getComputedStyle" (W3C compliant
    browsers, for example, Firefox).

    function getStyleProperty(obj, IEStyleProp, CSSStyleProp)
    {
    if (obj.currentStyle) //IE
    return obj.currentStyle[IEStyleProp];
    else if (window.getComputedStyle) //W3C
    return window.getComputedStyle(obj,
    "").getPropertyValue(CSSStyleProp);

    return null;
    }

    IEStyleProp and CSSStyleProp means the same property in the different
    way of writing. For example, left padding:
    IEStyleProp = "paddingLeft"
    CSSStyleProp = "padding-left"

    window.onload = function() {
    var tObj = document.getElementById('t');
    var t_paddingLeft = getStyleProperty(tObj, "paddingLeft",
    "padding-left");
    var t_borderLeft = getStyleProperty(tObj, "borderLeft",
    "border-left");
    alert("text-area left padding: " + t_paddingLeft);
    alert("text-area left border: " + t_borderLeft);
    }
    marss, Apr 27, 2006
    #2
    1. Advertising

  3. Guest

    Thank you v. much Marss, that's a big help.

    Never knew about getComputedStyle before, have always been using
    ..style.

    Thanks again!

    Jim
    , Apr 27, 2006
    #3
  4. RobG Guest

    marss said on 28/04/2006 12:56 AM AEST:
    [...]
    >
    > IEStyleProp and CSSStyleProp means the same property in the different
    > way of writing. For example, left padding:
    > IEStyleProp = "paddingLeft"
    > CSSStyleProp = "padding-left"


    You can get around the use of different identifiers for CSS style
    attributes, there's a thread here:

    <URL:
    http://groups.google.co.uk/group/co...edstyle camelCase rob&rnum=1#5ad520a01d905060
    >



    Hope that helps.



    --
    Rob
    Group FAQ: <URL:http://www.jibbering.com/FAQ>
    RobG, Apr 28, 2006
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. AndrewF
    Replies:
    1
    Views:
    733
    Bruce Barker
    Oct 10, 2005
  2. Paul Butcher
    Replies:
    12
    Views:
    674
    Gary Wright
    Nov 28, 2007
  3. Ned Baldessin
    Replies:
    1
    Views:
    165
  4. Replies:
    1
    Views:
    134
    Martin Honnen
    May 16, 2005
  5. mscir
    Replies:
    3
    Views:
    284
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page