node.offsetWidth vs clientWidth vs scrollWidth

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

    node.offsetWidth vs clientWidth vs scrollWidth


    for the code

    var node = document.getEle mentById("somet hing")
    alert(node.offs etWidth)

    is very similar to node.clientWidt h and node.scrollWidt h

    I just wonder why offsetWidth is well documented in the Definitive
    Javascript book, but clientWidth and scrollWidth are not mentioned at
    all, even when all 3 of them work in IE6, IE 7, Firefox 2, and Safari
    3.

    Also it seems that scrollWidth is always the same as offsetWidth. I
    can't make them different by hiding some part of that element so that
    one value is smaller and one is larger.

    Thanks very much!

    Tags: offsetwidth firefox, scrollwidth offsetwidth
    • Rik Wasmus
      #2
      Re: node.offsetWidt h vs clientWidth vs scrollWidth

      On Thu, 24 Apr 2008 11:17:42 +0200, liketofindoutwh y
      <liketofindoutw hy@gmail.comwro te:
      >
      for the code
      >
      var node = document.getEle mentById("somet hing")
      alert(node.offs etWidth)
      >
      is very similar to node.clientWidt h and node.scrollWidt h
      >
      I just wonder why offsetWidth is well documented in the Definitive
      Javascript book, but clientWidth and scrollWidth are not mentioned at
      all, even when all 3 of them work in IE6, IE 7, Firefox 2, and Safari
      3.
      >
      Also it seems that scrollWidth is always the same as offsetWidth. I
      can't make them different by hiding some part of that element so that
      one value is smaller and one is larger.
      I have no intimate knowledge of the subject, but making them all 3
      different is no trouble at all:
      <html>
      <head><title>te st</title>
      <script type="text/javascript">
      function test(elm){
      alert('offsetwi dth:' + elm.offsetWidth + ', scrollWidth: '
      + elm.scrollWidth + ', clientWidth: ' + elm.clientWidth );
      }
      </script>
      </head>
      <body>
      <div onclick="test(t his)"
      style="display: block;width:8em ;height:3em;ove rflow:scroll;">
      aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaa<br>
      aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaa<br>
      aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaa<br>
      aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaa<br>
      aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaa<br>
      aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaa<br>
      aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaa<br>
      aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaa<br>
      aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaa<br>
      </div>
      </body>
      </html>
      Results (FF2)here: 128, 477,112; I suspect, but feel free to correct me:

      offsetWidth: width on page
      scrollWidth: total width of element from left to right (so in this case
      scrollable content).
      clientWidth: visible portion of width due to existance of scrollbar.
      --
      Rik Wasmus

        Comment

        • Joost Diepenmaat
          #3
          Re: node.offsetWidt h vs clientWidth vs scrollWidth

          liketofindoutwh y <liketofindoutw hy@gmail.comwri tes:
          for the code
          >
          var node = document.getEle mentById("somet hing")
          alert(node.offs etWidth)
          >
          is very similar to node.clientWidt h and node.scrollWidt h
          >
          I just wonder why offsetWidth is well documented in the Definitive
          Javascript book, but clientWidth and scrollWidth are not mentioned at
          all, even when all 3 of them work in IE6, IE 7, Firefox 2, and Safari
          3.
          Last time I checked, only the offset* attributes were reliable in all
          popular browsers. This may have changed, though. See

          404 Not Found
          http://www.quirksmode.org/viewport/elementdimensions.html

          Also it seems that scrollWidth is always the same as offsetWidth. I
          can't make them different by hiding some part of that element so that
          one value is smaller and one is larger.
          Scrollwidth isn't about hiding per se, it's about having a content area
          wich is scrolled inside an area that's smaller. IOW, it's using
          overflow: auto / srcoll.

          --
          Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/

            Comment

            • liketofindoutwhy
              #4
              Re: node.offsetWidt h vs clientWidth vs scrollWidth

              On Apr 24, 2:35 am, "Rik Wasmus" <luiheidsgoe... @hotmail.comwro te:
              I have no intimate knowledge of the subject, but making them all 3
              different is no trouble at all:

              if it is

              <html>
              <head><title>te st</title>
              <script type="text/javascript">
              function test(elm){
              alert('offsetwi dth:' + elm.offsetWidth + ',
              scrollWidth: '
              + elm.scrollWidth + ', clientWidth: ' + elm.clientWidth );
              }
              </script>
              </head>
              <body>
              <div style="display: block;width:8em ;height:
              3em;overflow:sc roll;">
              <img onclick="test(t his)" src="http://
              www.sanrio.co.j p/english/characters/w_chara/pocha180.gif"
              </div>
              </body>
              </html>

              then the offsetWidth and scrollWidth is the same... so it looks like
              scrollWidth reflects an element with a scroll box, not an element
              contained in a scrollbox.

                Comment

                • liketofindoutwhy
                  #5
                  Re: node.offsetWidt h vs clientWidth vs scrollWidth

                  On Apr 24, 3:22 am, liketofindoutwh y <liketofindout. ..@gmail.com>
                  wrote:
                  On Apr 24, 2:35 am, "Rik Wasmus" <luiheidsgoe... @hotmail.comwro te:
                  >
                  then the offsetWidth and scrollWidth is the same... so it looks like
                  scrollWidth reflects an element with a scroll box, not an element
                  contained in a scrollbox.
                  i mean reflects something different for an element with a scrollbox,
                  nothing different for an element simply being inside the scrollbox.

                    Comment

                    • Rik Wasmus
                      #6
                      Re: node.offsetWidt h vs clientWidth vs scrollWidth

                      On Thu, 24 Apr 2008 12:25:27 +0200, liketofindoutwh y
                      <liketofindoutw hy@gmail.comwro te:
                      On Apr 24, 3:22 am, liketofindoutwh y <liketofindout. ..@gmail.com>
                      wrote:
                      >On Apr 24, 2:35 am, "Rik Wasmus" <luiheidsgoe... @hotmail.comwro te:
                      >>
                      >then the offsetWidth and scrollWidth is the same... so it looks like
                      >scrollWidth reflects an element with a scroll box, not an element
                      >contained in a scrollbox.
                      >
                      i mean reflects something different for an element with a scrollbox,
                      nothing different for an element simply being inside the scrollbox.
                      I'd say that would be so, and for good reason. The width of the image
                      element is not altered in any way, it just happens to be in a element
                      which itself is not 'fully extended'.
                      --
                      Rik Wasmus

                        Comment

                        Previous template Next
                        Working...