clientWidth and clientHeight 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>clientWidth clientHeight JavaScript</title>
    <link rel="stylesheet" href="css/clientWidth_clientHeight_JavaScript.css">
</head>

<body>
    <h2>JavaScript clientWidth & clientHeight</h2>
    <div id="box">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste, quidem sapiente? Architecto dicta culpa
        perspiciatis exercitationem, omnis aspernatur explicabo excepturi molestiae dolorem dolore asperiores cupiditate
        eum alias quis labore. Aut qui voluptas, perspiciatis sit natus praesentium voluptatem in, aspernatur dolorem
        quia perferendis tempore, earum exercitationem consequatur impedit repellat? Mollitia, eum dicta aliquid
        repudiandae consequatur animi culpa sunt? Saepe quibusdam voluptatem pariatur cupiditate, atque sint non nulla
        exercitationem? Vitae eveniet vel quos laboriosam tempore, nesciunt itaque sunt? Perferendis et libero corrupti
        soluta placeat, nulla tempora animi alias non nemo veniam doloremque iusto, quibusdam fuga recusandae
        exercitationem nesciunt expedita, vel laudantium. Repellendus dolorem obcaecati culpa totam! Esse suscipit,
        excepturi nemo illo doloremque numquam, qui explicabo alias optio molestiae ipsum perferendis nisi. Illum,
        incidunt? Veritatis magni consequatur obcaecati at, eos quam, accusantium quaerat earum tenetur esse dolores?
        Modi facilis, earum deserunt ut iste vero nobis! Facere corrupti vitae ab, quaerat quibusdam at odio maiores nam
        quasi similique soluta minima quis voluptatem quos, sapiente assumenda tempora vel dolor doloribus nisi
        perspiciatis eius. Veniam quod hic maxime culpa illum ipsam earum! Voluptas quis dolor pariatur maiores eius
        molestias aliquid eaque quasi sapiente repellat consequuntur maxime quam, hic corrupti laudantium vel, impedit
        quibusdam natus eos, quos quidem vitae! Suscipit laboriosam dolore eum dolor dicta sapiente omnis labore sequi
        ad non iste distinctio, nulla delectus, voluptate aut. Dolores velit unde perspiciatis! Obcaecati maxime,
        inventore itaque iste praesentium quisquam dolores voluptate quas minima nemo. Voluptates blanditiis,
        accusantium ea autem exercitationem, quibusdam corporis dolorum magni at aliquid sunt, rem excepturi mollitia!
        Delectus adipisci mollitia neque sapiente quaerat nulla magnam assumenda repellendus tenetur cum earum eum
        labore quae modi consequatur temporibus quis error, incidunt tempora alias deleniti, rerum autem aliquid.
        Voluptates, beatae error, et sed modi nesciunt numquam saepe perferendis tempora a porro dicta repudiandae
        ducimus quas illum recusandae sunt totam fugiat sit? Dignissimos dolore quo natus, quis maxime impedit modi,
        distinctio quia corporis qui assumenda hic autem? Neque harum, illum, veniam vitae deleniti natus, voluptates
        tenetur laboriosam dolore molestias molestiae doloremque. Iure, voluptate architecto laudantium rem, temporibus
        delectus eveniet, blanditiis consequuntur sequi soluta quos nesciunt ipsa dignissimos quam? A recusandae iste,
        nihil adipisci nemo similique autem animi omnis ut sed, amet id sunt. Id a delectus sunt, tempora repellat
        repudiandae illo alias hic esse? Ratione ad adipisci, corporis nobis deleniti veniam architecto? Perferendis,
        rem, ut totam sit sunt animi veniam, odit quaerat obcaecati consequuntur eveniet quam praesentium aut corrupti.
    </div>
    <script>
        var target = document.querySelector("#box");

        //clientWidth and clientHeight neglect border-width and border-height, scrollbar-width and scrollbar-height and margin
        var width = target.clientWidth;
        var height = target.clientHeight;

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

</html>




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

#box {
    background: #ffa500;
    width: 300px;
    height: 300px;
    border: 10px solid #000000;
    padding: 10px;
    margin: 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