jquery dimensions

jquery dimension methods.

jquery provide number of methods for working with dimensions:-

  • height()
  • innerheight()
  • outerheight()
  • width
  • innerwidth()
  • outerwidth()

jquery height() and width() methods

jquery height() method is used to sets or returns the height of an element, without including the padding , margin, border.

the jquery get height method syntax:

     $(selector).height ();

the jquery set height method syntax:

  $(selector).height ( value );

jquery height method example - how get the height of the selected element

              $("button").click(function(){
                   
      alert("the height of div element :--"+$("div").height());
                   
                      })
              

how set the height of the selected element using jquery height(value) method


jquery width() method is used to sets or returns the width of an element, without including the padding , margin, border.

the jquery syntax for get width:

    $(selector).width ();

Jquery width() method example

the jquery set width method syntax:

      $(selector).width ( value );

jquery width(value) method example

               $(document).ready(function(){
                   
                   $("button").click(function(){
                   
                   $("div").width(430);                   
                   
                       });  });
              

jquery outerheight() and outerwidth() methods

jquery outerheight() method is used to returns the height of an element, including padding and border

jquery outerheight(true) method is used to returns the height of an element, including padding margin and border

the jquery outerHeight method syntax :

   $(selector).outerheight ();

jquery outerHeight method example

               $(document).ready(function(){
          
          $("button").click(function(){
          
      alert("the outer-height of div element :--"+$("div").outerheight());
                   
          }); });              
              

jquery outerwidth() method is used to returns the width of an element, including the padding and border.

jquery outerwidth(true) method is used to returns the width of an element, including the padding margin and border.

the jquery outerWidth method syntax :

           $(selector).outerwidth ();

jquery outerWidth method example

               $(document).ready(function(){
                   
                   $("button").click(function(){
                   
    alert("the outer-width of div element :--"+$("div").outerwidth());
                   
                    }); });
              

jquery innerheight() and innerwidth() methods

jquery innerheight() method is used to returns the height of an element, including padding but not border

the jquery innerHeight syntax :

          $(selector).innerheight ();

The jquery innerHeight method example

              $(document).ready(function(){
                   
                   $("button").click(function(){
                   
            alert("the inner-height of div element :--"+$("div").innerheight());
                   
                       }); }); 
              

jquery innerwidth() method is used to returns the width of an element, including the padding but not border.

the jquery innerWidth method syntax :

  $(selector).innerwidth ();

The jquery innerWidth method example

              $(document).ready(function(){
                   
                   $("button").click(function(){
                   
   alert("the inner-width of div element :--"+$("div").innerwidth());
                   
                       }); });