Strict mode; offsetWidth versus style.width calculations

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • jdlwright@gmail.com
    #1

    Strict mode; offsetWidth versus style.width calculations

    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.dt d">
    <HTML>
    <HEAD>
    <style>
    .box{

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

    }
    </style>

    <script type='text/javascript'>
    window.onload = function(){
    document.getEle mentById('d').s tyle.width =
    document.getEle mentById('t').o ffsetWidth+"px" ;
    document.getEle mentById('d').s tyle.height =
    document.getEle mentById('t').o ffsetHeight+"px ";
    }
    </script>
    </head>


    <body >

    <textarea id='t' style="z-index:100; width: 200px; height: 210px;
    position:absolu te; 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

    Tags: None
    • marss
      #2
      Re: Strict mode; offsetWidth versus style.width calculations

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

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

      function getStylePropert y(obj, IEStyleProp, CSSStyleProp)
      {
      if (obj.currentSty le) //IE
      return obj.currentStyl e[IEStyleProp];
      else if (window.getComp utedStyle) //W3C
      return window.getCompu tedStyle(obj,
      "").getProperty Value(CSSStyleP rop);

      return null;
      }

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

      window.onload = function() {
      var tObj = document.getEle mentById('t');
      var t_paddingLeft = getStylePropert y(tObj, "paddingLef t",
      "padding-left");
      var t_borderLeft = getStylePropert y(tObj, "borderLeft ",
      "border-left");
      alert("text-area left padding: " + t_paddingLeft);
      alert("text-area left border: " + t_borderLeft);
      }

        Comment

        • jdlwright@gmail.com
          #3
          Re: Strict mode; offsetWidth versus style.width calculations

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

          Never knew about getComputedStyl e before, have always been using
          ..style.

          Thanks again!

          Jim

            Comment

            • RobG
              #4
              Re: Strict mode; offsetWidth versus style.width calculations

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

              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/com...d520a01d905060[color=blue]
              >[/color]


              Hope that helps.



              --
              Rob
              Group FAQ: <URL:http://www.jibbering.c om/FAQ>

                Comment

                Previous template Next
                Working...