কম্পিউটার টিউটোরিয়াল

HTML DOM previousElementSibling প্রোপার্টি


HTML DOM previousElementSibling প্রোপার্টি HTML ডকুমেন্টে নির্দিষ্ট এলিমেন্টের একই ট্রি লেভেলে থাকা পূর্বের এলিমেন্টটি রিটার্ন করে।

সিনট্যাক্স

নিচে সিনট্যাক্স দেওয়া হলো:

node.previousElementSibling

উদাহরণ

previousElementSibling প্রোপার্টির একটি উদাহরণ দেখি:

<!DOCTYPE html> <html> <head> <style>    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;       height:100%;    }    p{       font-weight:700;       font-size:1.2rem;    }    .drop-down{       width:50%;       border:2px solid #fff;       font-weight:bold;       padding:8px;    }    ul{       list-style-type: none;       padding:0;    }    .btn{       background:#0197F6;       border:none;       height:2rem;       border-radius:2px;       width:50%;       margin:2rem auto;       display:block;       color:#fff;       outline:none;       cursor:pointer;    }    .show{       font-size:1.5rem;       font-weight:bold;    } </style> </head> <body> <h1>DOM previousElementSibling Property Demo</h1> <p>Hi, My favourite subjects are:</p> <ul> <li>Physics</li> <li id="chemistry">Chemistry</li> <li>Maths</li> <li>English</li> </ul> <button class="btn" onclick="showSibling()">Show Previous Sibling Of Chemistry</button> <div class="show"></div> <script>    function showSibling() {       var chemistry= document.querySelector("#chemistry");       document.querySelector(".show").innerHTML=chemistry.previousElementSibling.innerHTML;    } </script> </body> </html>

আউটপুট

এটি নিচের আউটপুট তৈরি করবে:

HTML DOM previousElementSibling প্রোপার্টি

কেমিস্ট্রি লিস্ট আইটেমের পূর্বের সিবলিং পেতে নীল বাটনে ক্লিক করুন।

HTML DOM previousElementSibling প্রোপার্টি


  1. HTML DOM Ol reversed প্রপার্টি

  2. HTML DOM offsetWidth প্রপার্টি

  3. HTML DOM offsetParent প্রপার্টি

  4. HTML DOM title প্রপার্টি