How To Use offsetHeight and offsetWidth Property Using JavaScript?

Nov 15, 2021 . Admin



Hello Friends,

Now let's see example of how to use offsetHeight and offsetWidth property example. We will use offsetHeight and offsetWidth property using javascript. This is a short guide on use offsetHeight and offsetWidth property in javascript. Let's get started with how to use offsetHeight and offsetWidth property in javascript.

Here i will give you many example how to use offsetHeight and offsetWidth property using javascript.

Example : 1
<html>  
    <head>  
        <title>How To Use offsetHeight and offsetWidth Property Using JavaScript? - MyWebtuts.com</title>  
        <style>  
            #a1{  
                height: 150px;  
                width: 200px;  
                margin: 20 20 20 0px;  
                padding: 15px;  
                background-color: lightgray;  
            }  
        </style>  
    </head>       
    <body>  
        <h3>How To Use offsetHeight and offsetWidth Property Using JavaScript? - MyWebtuts.com</h3>  
        <div id= "a1">  
            <b>Information About This Div Tab : </b>  
            <p id= "a2"> </p>  
        </div>  
        <button type="a1" onclick="a3()"> Submit </button>  
          
        <script>  
            function a3() {  
                var test = document.getElementById("a1");  
                var txt = "Height of the elements paragraph along with padding and border in pixels is: " + test.offsetHeight + "px";  
                document.getElementById("a2").innerHTML = txt;  
            }  
        </script>  
    </body>  
</html>
Output : 
Information About This Div Tab :
Height of the elements paragraph along with padding and border in pixels is: 180px
Example : 2 
<html>  
    <head>  
        <title>How To Use offsetHeight and offsetWidth Property Using JavaScript? - MyWebtuts.com</title>  
        <style>  
            #a1 {  
                height: 120px;  
                width: 350px;  
                margin: 20 20 20 0px;  
                padding: 15px;  
                background-color: lightgray;  
            }  
        </style>  
    </head>        
    <body>  
        <h3>How To Use offsetHeight and offsetWidth Property Using JavaScript? - MyWebtuts.com</h3>  
        <div id= "a1">  
            <b>Information About This Div Tab : </b>  
            <p id= "a2"> </p>  
            <p id= "a3"> </p>  
        </div>  
        <button type="button" onclick="offs()"> Submit </button>  
          
        <script>  
            function offs() {  
                var test = document.getElementById("a1");  
                var d1 = "OffsetHeight of the paragraph along with padding and border in pixels is: " + test.offsetHeight + "px";  
                var d2 = "OffsetWidth of the paragraph along with padding and border in pixels is: " + test.offsetWidth + "px";  
                  
                document.getElementById("a2").innerHTML = d1;  
                document.getElementById("a3").innerHTML = d2;  
            }  
        </script>  
    </body>  
</html>
Output : 
Information About This Div Tab :

OffsetHeight of the paragraph along with padding and border in pixels is: 150px

OffsetWidth of the paragraph along with padding and border in pixels is: 380px

It will help you...

#Javascript

You might also like...