Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Different jquery methods used to calculate dimensions

    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 702
    Comment on it

    Hii,

    In this blog i am going to  share the definition and difference between  different methods of jquery used to calculate  dimensions.

    Following are the six different jquery methods used to calculate dimensions as per the requirements

    width() : This method is used to calculate CSS width property dynamically.
    Example 1: In this example jquery width() method is used to find the width of  the box.

    CSS:

    #div1{margin:0 auto;height: 100px;width: 300px;padding:5px;border: 5px solid rgb(51,102,0);background-color: rgb(102,255,51);}


     HTML:
     

    <div class="main">
     <div id="div1"></div>
     <button id="button1">Click on me to get the width of the box</button>
    </div>


    Javascript:

    $("#button1").click(function(){
        var txt = "";
        txt += "Width of this box is: " + $("#div1").width();
        $("#div1").html(txt);
    });


    height() :  This method is used to calculate CSS height property dynamically.
    Example 2: In this example jquery height() method is used to find the height of  the box.
    CSS:
     

    #div2{margin:0 auto;height: 100px;width: 300px;padding:5px;border: 5px solid rgb(192,52,39);background-color: rgb(234,155,33);}


     HTML:
     

    <div class="main">
     <div id="div2"></div>
     <button id="button2">Click on me to get the height of the box</button>
    </div>
    

    Javascript:

    $("#button2").click(function(){
        var txt = "";
        txt += "Height of this box is: " + $("#div2").height();
        $("#div2").html(txt);
    });


    innerWidth() : This method is used to calculate CSS width property dynamically excluding the border width and including the padding(x axis) given.
    Example 3: In this example jquery innerWidth() method is used to find the width of  the box.
    CSS:

    #div3{margin:0 auto;height: 100px;width: 300px;padding:5px;border: 5px solid rgb(204,0,153);background-color: lightblue;}

     HTML:

    <div class="main">
     <div id="div3"></div>
     <button id="button3">Click on me to get the innerwidth of the box</button>
    
    </div>

    Javascript:

    $("#button3").click(function(){
        var txt = "";
        txt += "innerwidth of this box is: " + $("#div3").innerWidth();
        $("#div3").html(txt);
      });

    innerHeight() : This method is used to calculate CSS height property dynamically excluding the border height and including the padding(y axis) given.
    Example 4: In this example jquery innerHeight() method is used to find the height of  the box
    CSS:

    #div4{margin:0 auto;height: 100px;width: 300px;padding:5px;border: 5px solid blue;background-color: rgb(255,102,255);}


     HTML:

    <div class="main">
     <div id="div4"></div>
     <button id="button4">Click on me to get the innerheight of the box</button>
    </div>

    Javascript:

    $("#button4").click(function(){
        var txt = "";
        txt += "innerheight of this box is: " + $("#div4").innerHeight();
        $("#div4").html(txt);
      });

    outerWidth() :  This method is used to calculate  CSS width property dynamically including both the border width and padding given.
    Example 5 : In this example jquery outerWidth() method is used to find the width of  the box
    CSS:

    #div5{margin:0 auto;height: 100px;width: 300px;padding:5px;border: 5px solid rgb(255,102,102);background-color: rgb(128,0,0);}


     HTML:

    <div class="main">
     <div id="div5"></div>
     <button id="button5">Click on me to get the outerwidth of the box</button>
    </div>

    Javascript:

    $("#button5").click(function(){
        var txt = "";
        txt += "outerwidth of this box is: " + $("#div5").outerWidth();
        $("#div5").html(txt);
      });

    outerHeight() : This method is used to calculate CSS height property dynamically including both the border width and padding given.
    Example 6 : In this example jquery outerHeight() method is used to find the height of  the box
    CSS:

    #div6{margin:0 auto;height: 100px;width: 300px;padding:5px;border: 5px solid #000;background-color:rgb(153,255,204);}


     HTML:

    <div class="main">
     <div id="div6"></div>
     <button id="button6">Click on me to get the outerheight of the box</button>
    </div>

    Javascript:

    $("#button6").click(function(){
        var txt = "";
        txt += "outerheight of this box is: " + $("#div6").outerHeight();
        $("#div6").html(txt);
    });

    Note:  Must include this link in your file


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    Different jquery methods used to calculate dimensions

 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: