Loading Please Wait...

Logo Lynxsia IT Solutions

jQuery DOM Dimensions

JQ DOM Dimensions

With jQuery, it is easy to work with the dimensions of elements and browser window.

jQuery Dimension Methods

jQuery has several methods for CSS manipulation. We will look at the following methods:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()
jQuery Dimensions
Dimension Box Model
jQuery width() and height() Methods

The width() method sets or returns the width of an element (excludes padding, border and margin).

The height() method sets or returns the height of an element (excludes padding, border and margin).

					 
        
          $("button").click(function(){
            $("div").width();        // get width in px
            $("div").width(50);      // set width to 50 px
            $("div").height();       // get height in px
            $("div").height("50em"); // set height to 50 em
          });
        
      
jQuery innerWidth() and innerHeight() Methods

The innerWidth() method returns the width of an element (includes padding).

The innerHeight() method returns the height of an element (includes padding).

					 
        
          $("button").click(function(){
            $("div").innerWidth();  // get width in px
            $("div").innerHeight(); // get height in px
          });
        
      
jQuery outerWidth() and outerHeight() Methods

The outerWidth() method returns the width of an element (includes padding and border).

The outerHeight() method returns the height of an element (includes padding and border).

					 
        
          $("button").click(function(){
            $("div").outerWidth();  // get width in px
            $("div").outerHeight(); // get height in px
          });
        
      

The outerWidth(true) method returns the width of an element (includes padding, border, and margin).

The outerHeight(true) method returns the height of an element (includes padding, border, and margin).

					 
        
          $("button").click(function(){
            $("div").outerWidth(true);  // get width in px
            $("div").outerHeight(true); // get height in px
          });
        
      

How you feel about this blog:

Share this blog on:

Report Us

If you find any error in the turtorials, or want to share your suggestion/feedback, feel free to send us email at: info@lynxsia.com

Contact Us
Ads
Logo
Lynxsia IT Solutions

We are concern with various development process like website design & development, E-commerce development, Software development, Application development, SMS & Bulk SMS Provider, PWA Development, and many more..

Kotwali Road, Chhiptehri, Banda, 210001, UP, India

Copyright © 2022, Lynxsia IT Solutions, All rights reserved