Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to get height and width of a html element?

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 376
    Comment on it

    Hello Reader's If you are dealing with JQuery in your website and want to get the height and width of any html element then this blog will very helpful to you. 
    So lets get started working of getting the height and width of a div .

    First you need to create div and assign it's height and width by using css. And it's html code will go like this:-

    <!DOCTYPE html>
    <html>
    <head>
    
    <style>
    #divcss {
      height: 100px;
      width: 300px;
      padding: 10px;
      margin: 3px;
      border: 1px solid blue;
      background-color: lightblue;
    }
    </style>
    </head>
    <body>
    
    <div id="divcss"></div>
    <br>
    
    <button>Display dimensions of div</button>
    
    <p>width() - returns the width of an element.</p>
    <p>height() - returns the height of an element.</p>
    
    </body>
    </html>
    
    

     

    Now we have to call the jquery file. You can use it via CDN of google also then  write the script for getting the required dimension and its script will go like this:-

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        var txt = "";
        txt += "Width of div: " + $("#divcss").width() + "</br>";
        txt += "Height of div: " + $("#divcss").height();
        $("#div1").html(txt);
      });
    });
    </script>

    Now as the script will load on page the .width() and .height() function will get the dimensions of div which have id "divcss". And on clicking the button the values will be printed on the line which tells the values. 

 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: