Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Finding the Dimensions of an Element

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 465
    Comment on it

    You want to determine the space occupied by an element.

    The width and height methods can be applied to any element, and they are useful for determining the computed width or height of an element. However, they fall short if you need to determine the actual real estate that an element is occupying on the screen. In addition to width and height, jQuery provides the following methods for determining more specific dimensions of an element:

    innerWidth Returns the width excluding the border and including the padding.

    innerHeight Returns the height excluding the border and including the padding.

    outerWidth Returns the width including both the border and the padding.

    outerHeight Returns the height including the border and including the padding.

    HTML:

    <div id="results"></div>
    <div id="myDiv">Some text.</div>
    

    CSS:

    #myDiv {
    width:100px;
    height:30px;
    padding:10px;
    border:1px;
    }
    

    JQuery:

    $(function() {
        var $myDiv=jQuery('#myDiv');
        var $results=jQuery('#results');
        jQuery('<p>Computed width:'+$myDiv.width()+'</p>')
        .appendTo($results); // 100
        jQuery('<p>Computed height:'+$myDiv.height()+'</p>')
        .appendTo($results); // 30
        jQuery('<p>Inner width:'+$myDiv.innerWidth()+'</p>')
        .appendTo($results); // 120
        jQuery('<p>Inner height:'+$myDiv.innerHeight()+'</p>')
        .appendTo($results); // 50
        jQuery('<p>Outer width:'+$myDiv.outerWidth()+'</p>')
        .appendTo($results); // 122
        jQuery('<p>Outer height:'+$myDiv.outerHeight()+'</p>')
        .appendTo($results); // 52
        jQuery('<p>Document outer height:'+jQuery(document).outerHeight()+'</p>')
        .appendTo($results); // NaN
        jQuery('<p>Document inner height:'+jQuery(document).innerHeight()+'</p>')
        .appendTo($results); // NaN
        jQuery('<p>Window outer height:'+jQuery(window).outerHeight()+'</p>')
        .appendTo($results); // NaN
        jQuery('<p>Window inner height:'+jQuery(window).innerHeight()+'</p>')
        .appendTo($results); // NaN
    });
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: