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

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


DOM scrollWidth প্রোপার্টি HTML ডকুমেন্টে একটি এলিমেন্টের সম্পূর্ণ প্রস্থ (কনটেন্ট + প্যাডিং) পিক্সেলে রিটার্ন করে।

সিনট্যাক্স

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

element.scrollWidth

উদাহরণ

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

<!DOCTYPE html> <html> <head> <style>    html{       height:100%;    }    body{       text-align:center;       color:#fff;       background: #ff7f5094;       height:100%;    }    p{       font-weight:700;       font-size:1.2rem;       height:80px;       border:1px solid #fff;       overflow:auto;       width:250px;       margin:20px auto;    }    .btn{       background:#0197F6;       border:none;       height:2rem;       border-radius:2px;       width:35%;       margin:2rem auto;       display:block;       color:#fff;       outline:none;       cursor:pointer;    }    .show{       font-size:1.5rem;    } </style> </head> <body> <h1>DOM scrollHeight/scrollWidth Property Demo</h1> <p>Hi!I'm a para element in HTML with some dummy text. Hi!I'm a para element in HTML with some dummy text. Hi!I'm a para element in HTML with some dummy text. Hi!I'm a para element in HTML with some dummy text.</p> <button onclick="getHW()" class="btn">Get paragraph height & width</button> <div class="show"></div> <script>    function getHW() {       var para = document.querySelector('p');       document.querySelector(".show").innerHTML="
Para Height = "+para.scrollHeight+" px
Para Width = "+ para.scrollWidth+" px
";    } </script> </body> </html>

আউটপুট

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

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

নীল বাটনে ক্লিক করুন প্যারাগ্রাফের স্ক্রোল প্রস্থ ও উচ্চতা দেখাতে।

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


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

  2. HTML DOM Ol start প্রপার্টি

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

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