offsetTop and offsetLeft 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>offsetTop and offsetLeft Methods JavaScript</title>
    <link rel="stylesheet" href="css/offsetTop_offsetLeft_Methods_JavaScript.css">
</head>

<body>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem optio vitae aspernatur possimus quia dolorum
        modi. Sapiente quisquam fugiat aliquid omnis esse illum iure quod facere. Mollitia, pariatur dolorem sunt ut
        earum, praesentium vero ipsa fugit sed est quisquam amet officiis, nihil in voluptates magnam odit veniam
        ducimus aliquid. Animi, sapiente temporibus vitae sit commodi quaerat rerum perferendis, adipisci ipsum minima
        dolorem nam nostrum alias, ea laudantium. Deserunt distinctio nisi animi iste, repellendus sit odio, aspernatur
        ea, sunt veritatis quo beatae earum facere aliquid voluptate soluta nam ipsum non sequi fugiat fugit modi illo
        consequatur! Quisquam excepturi modi labore sequi aspernatur saepe sint dicta quam aliquam amet, exercitationem
        tenetur in, ratione sunt, sed illo itaque minima iste laudantium adipisci. Ipsum cumque modi nostrum tempora
        nulla in ea nihil, deleniti laborum itaque facere! Quo amet hic delectus fugit numquam sit autem aspernatur
        ratione eum magnam cum, mollitia ducimus dolorum voluptatum voluptates reprehenderit adipisci ullam iure quasi,
        recusandae atque? Officia sint iure quo praesentium id minus ratione, sapiente, nemo quidem facilis, dolores
        quas sunt saepe cum tempore? Quos facilis minima corporis velit maxime atque, libero quo consectetur quod sit
        possimus aliquid. Laboriosam alias architecto id sint repudiandae repellat omnis perferendis hic dicta.
    </p>
    <div id="box">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam similique quam, itaque sequi iste porro dolores,
        nulla corrupti adipisci veniam nobis non sed dolorem fuga commodi quaerat totam autem enim? Deserunt, tempore.
        Dolor neque optio ullam ipsa placeat minima soluta enim mollitia quidem voluptatem alias delectus, sint aperiam
        maxime molestiae incidunt autem repellendus omnis voluptatum porro! Distinctio minima labore facilis tenetur ut
        omnis quia excepturi cum pariatur ad reiciendis veniam perferendis ratione voluptate non consequuntur facere,
        quaerat corrupti harum! Quae voluptatem iste, sapiente, id assumenda tempora, necessitatibus cupiditate aut
        deserunt minus nam hic accusantium quas sint illo corrupti nostrum ipsam.
    </div>
    <script>
        var box = document.querySelector("#box");
        console.log("Box offsetTop : " + box.offsetTop);
        console.log("Box offsetLeft : " + box.offsetLeft);
    </script>
</body>

</html>





Below File is css/offsetTop_offsetLeft_Methods_JavaScript.css File
body {
    margin: 0;
}

#box {
    background: #ffc0cb;
    width: 500px;
    height: 500px;
    margin-top: 10px;
    margin-left: 50px;
    border: 1px solid #000000;
}


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