Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Finding the Dimensions of an Element

    @sunil.chatterji
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 500
    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:

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

    CSS:

    1. #myDiv {
    2. width:100px;
    3. height:30px;
    4. padding:10px;
    5. border:1px;
    6. }

    JQuery:

    1. $(function() {
    2.     var $myDiv=jQuery('#myDiv');
    3.     var $results=jQuery('#results');
    4.     jQuery('<p>Computed width:'+$myDiv.width()+'</p>')
    5.     .appendTo($results); // 100
    6.     jQuery('<p>Computed height:'+$myDiv.height()+'</p>')
    7.     .appendTo($results); // 30
    8.     jQuery('<p>Inner width:'+$myDiv.innerWidth()+'</p>')
    9.     .appendTo($results); // 120
    10.     jQuery('<p>Inner height:'+$myDiv.innerHeight()+'</p>')
    11.     .appendTo($results); // 50
    12.     jQuery('<p>Outer width:'+$myDiv.outerWidth()+'</p>')
    13.     .appendTo($results); // 122
    14.     jQuery('<p>Outer height:'+$myDiv.outerHeight()+'</p>')
    15.     .appendTo($results); // 52
    16.     jQuery('<p>Document outer height:'+jQuery(document).outerHeight()+'</p>')
    17.     .appendTo($results); // NaN
    18.     jQuery('<p>Document inner height:'+jQuery(document).innerHeight()+'</p>')
    19.     .appendTo($results); // NaN
    20.     jQuery('<p>Window outer height:'+jQuery(window).outerHeight()+'</p>')
    21.     .appendTo($results); // NaN
    22.     jQuery('<p>Window inner height:'+jQuery(window).innerHeight()+'</p>')
    23.     .appendTo($results); // NaN
    24. });
    JQuery Javascript
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: