Finding element dimension values width and height

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • steven
    New Member
    • Sep 2006
    • 143
    #1

    Finding element dimension values width and height

    Hi

    Is it actually possible to find the current size (in pixels) of a html element, regardless of whether or not these attributes have been set, or even if a percentage value was used?

    My case: I want to find the height / width of a span tag or the height / width of a div tag. I've browsed the DOM but I can't figure out what to use. I've even tried directly accessing properties .height .width (which works for images) or .style.height .style.width.

    If it's possible, that's great - it's pretty much all I need to know. =)

    Thanks
    Tags: None
    • ronverdonk
      Recognized Expert Specialist
      • Jul 2006
      • 4259
      #2
      A sample for your DIV width question:
      [html]<html><head></head><body>
      <div id='test' style='width:30 0px;'>
      </div>
      <script type="text/javascript">
      var w = document.getEle mentById("test" ).style.width;
      alert('width='+ w);
      </script>
      </body></html>[/html]
      For an excellent tutorial on DOM usage, see link DOM Reference

      Ronald :cool:

        Comment

        • steven
          New Member
          • Sep 2006
          • 143
          #3
          Thanks Ronald, but as I mentioned in my previous post - the dimension won't be specified, or at best, will be specified in percentage. I see that in your example, you specifically specified the width.

          Is it possible to determine the dimensions without specifically setting the dimension in pixels?

            Comment

            • steven
              New Member
              • Sep 2006
              • 143
              #4
              Just posting the answer in case anyone else finds it useful.

              Look at the clientWidth and clientHeight properties.

              This is what I was looking for in my particular case. Something that would return the dimensions in pixels, even if they hadn't been set in a stylesheet, or if they were set using percentage values.

              example:

              Code:
              <div id="testing">lorem ipsum</div>
<script type="text/javascript">
  var test = document.getElementById("testing");
  alert("width: "+clientWidth+"px");
</script>

              I believe you could use offsetHeight and offsetWidth too, though these also take into account possible scoll bars etc (I think). I still have more reading to do in Javascript.

                Comment

                • nicky857
                  New Member
                  • Mar 2008
                  • 1
                  #5
                  <div id="testing">lo rem ipsum</div>
                  <script type="text/javascript">
                  var test = document.getEle mentById("testi ng");
                  var clientWidth = test.offsetWidt h;
                  alert("width: "+clientWidth+" px");
                  </script>

                    Comment

                    • mmurph211
                      New Member
                      • Jan 2008
                      • 13
                      #6
                      try these functions

                      not sure if these functions work with scrollbars in view but worth a shot

                        Comment

                        Previous template Next
                        Working...