offsetWidth and offsetHeight Methods tutorial in JavaScript

 <!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>offsetWidth offsetHeight Methods JavaScript</title>
    <link rel="stylesheet" href="css/offsetWidth_offsetHeight_Methods_JavaScript.css">
</head>

<body>
    <h2>JavaScript offsetWidth & offsetHeight</h2>
    <div id="box">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Neque odit eius ipsum aliquam inventore distinctio
        voluptates similique ut, eligendi officia fuga, ratione dolorem est dolor molestias. Laborum enim rem
        exercitationem molestiae quae autem, deserunt ab cumque corrupti repellat aperiam expedita recusandae fugit
        quaerat alias dolorum iusto necessitatibus optio illo magnam. Porro tempora ab sapiente, velit magnam dolor quos
        voluptatum soluta possimus recusandae obcaecati magni perferendis esse deleniti sunt quibusdam rem ad. Quas
        aliquid temporibus maxime fuga quia laborum, praesentium sunt sint molestiae eius perferendis. Quam dolore
        assumenda quia consectetur vel at modi mollitia. Cupiditate suscipit mollitia itaque expedita nam culpa
        reprehenderit eligendi dolore vero quia exercitationem alias ipsa magnam voluptatum eveniet sapiente aliquam,
        laborum deleniti eius temporibus. Repellat sint tempore eos totam inventore, recusandae, dolores rerum
        exercitationem dolorum quas fugiat a molestiae. Eaque magni ratione, nisi vel enim corporis veniam recusandae,
        sed doloremque similique adipisci! Esse, illum, numquam vel eius molestias vitae beatae totam amet et
        necessitatibus ut sed distinctio deleniti iure ad maxime doloremque, aperiam iste harum. Quae nulla voluptatem
        sequi cumque possimus nihil, perspiciatis reiciendis recusandae tempora, similique vero doloremque ea, quas
        necessitatibus obcaecati assumenda nesciunt. Quidem incidunt vel libero, accusantium reiciendis temporibus sit
        possimus, alias totam ea repellendus cupiditate est maxime excepturi officia beatae ipsa nostrum. Dolorum,
        eveniet ratione aliquam accusamus blanditiis eius, minima ullam officiis minus id culpa fugiat quas quam facilis
        voluptates amet suscipit. Eveniet nihil totam iste repellendus possimus vitae tempore, facere fuga sunt.
        Asperiores suscipit nulla illum incidunt eligendi reprehenderit, sit rerum natus impedit non vero officia esse
        debitis maxime delectus iure ipsum? Recusandae, aperiam, laborum dolorum aliquam vel repudiandae dolorem
        adipisci beatae facere harum, animi vero qui esse eum expedita vitae. Molestias iure alias, saepe repudiandae
        quibusdam dolores expedita doloribus quam accusantium voluptatem nostrum vitae necessitatibus minima dolor autem
        non. Optio aliquid quod numquam consequatur, quo reiciendis impedit unde cum facere repellat, et saepe provident
        quam ducimus animi sed reprehenderit amet, doloribus velit itaque temporibus ipsum. Dolore quos voluptatem modi
        amet veritatis. Inventore ratione debitis hic adipisci soluta quas repellat, praesentium cumque quae,
        consectetur nobis. A non libero culpa dolorum tempora repudiandae nam nobis sed consectetur, aspernatur quis aut
        reprehenderit quia iure officiis. Doloremque architecto amet nesciunt, perspiciatis ipsam eius perferendis sed
        porro recusandae! Nisi recusandae reiciendis similique quod eum, vitae fugiat doloribus sit totam expedita
        incidunt ut minima repellat illum sunt. Et praesentium iusto, eveniet repudiandae nostrum harum. Repudiandae,
        numquam autem.
    </div>
    <script>
        var target = document.querySelector("#box");

        var width = target.offsetWidth;
        var height = target.offsetHeight;

        console.log("offsetWidth : " + width);
        console.log("offsetHeight : " + height);
    </script>
</body>

</html>




Below File is css/offsetWidth_offsetHeight_Methods_JavaScript.css File
body {
    font-family: arial;
}

#box {
    background: #ffa500;
    width: 300px;
    height: 300px;
    border: 10px solid #000000;
    padding: 10px;
    overflow: auto;
}


Comments

Post a Comment

Popular posts from this blog

Generators tutorial in Advance JavaScript

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Generators Advance JavaScript </ title >     < link rel = "stylesheet" href = "" > </ head > < body >     < script >         //Example 1 :         // function* generateit() {         //     console.log("First Message");         //     yield "Yield No. 1"; //Here Statement will be Pause, To remove the Pause we have to call next() method again as shown below         //     console.log("Second Message");         //     yield "Yield No. ...
Read more

Document Object Module DOM querySelector and querySelectorAll tutorial in JavaScript

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > DOM querySelector querySelectorAll JavaScript </ title >     < link rel = "stylesheet" href = "css/main.css" > </ head > < body >     < div id = "wrapper" >         < div id = "header" class = "abc" style = " border:1px solid #ff0000;" onClick = "xyz()" >             < h1 > Hello World </ h1 >             < h1 > Welcome </ h1 >         </ div >         < div id = "menu" >             < ul >...
Read more

Find Even and Odd Numbers with Loops tutorial in JavaScript

Image
  <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0, shrink-to-fit=no" >     < meta http-equiv = "X-UA-Compatible" content = "ie=edge" >     < title > Even Odd Numbers with Loops </ title >     < script >         for ( var a = 1 ; a <= 10 ; a ++) {             if ( a % 2 == 0 ) {                 document . write ( "Even Number : " + a + "<br>" );             }         }         for ( var b = 1 ; b <= 10 ; b ++) {             if ( b % 2 != 0 ) {                 document . write ( "Odd Number : " + b + "<br>"...
Read more