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

HTML DOM Style overflow প্রোপার্টি


DOM style overflow প্রোপার্টি HTML ডকুমেন্টে একটি এলিমেন্টের overflow CSS প্রোপার্টি রিটার্ন ও পরিবর্তন করে।

সিনট্যাক্স

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

  • overflow রিটার্ন করা

object.style.overflow
  • overflow পরিবর্তন করা

object.style.overflow = "value"

মানগুলো

এখানে value হতে পারে:

মান ব্যাখ্যা
scroll এটি কনটেন্ট ক্লিপ করে এবং প্রয়োজন হলে স্ক্রোলবার যোগ করে।
inherit এটি প্যারেন্ট এলিমেন্ট থেকে এই প্রোপার্টির মান ইনহেরিট করে।
initial এটি এই প্রোপার্টির মান ডিফল্ট ভ্যালুতে সেট করে।
auto এটি কনটেন্ট ক্লিপ করে এবং প্রয়োজন হলে স্ক্রোলবার যোগ করে।
hidden এটি এলিমেন্ট বক্সের বাইরে কনটেন্ট ফ্লো হাইড করে।
visible এটি কনটেন্ট ক্লিপ করে না এবং কনটেন্ট এলিমেন্ট বক্সের বাইরে ফ্লো করে।

উদাহরণ

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

<!DOCTYPE html> <html> <head> <style>    body {       color: #000;       background: lightblue;       height: 100vh;    }    p {       border: 2px solid #fff;       margin: 1.5rem auto;       height: 100px;       overflow: scroll;    }    .btn {       background: #db133a;       border: none;       height: 2rem;       border-radius: 2px;       width: 40%;       display: block;       color: #fff;       outline: none;       cursor: pointer;    } </style> </head> <body> <h1>DOM Style overflow Property Example</h1> <p>This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.    This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.    This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.    This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.    This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.    This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.    This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.    This is paragraph 1 with some dummy text. This is paragraph 1 with some dummy text.    This is paragraph 1 with some dummy text. </p> <button onclick="add()" class="btn">Change overflow</button> <script>    function add() {       document.querySelector('p').style.overflow = "hidden";    } </script> </body> </html>

আউটপুট

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

HTML DOM Style overflow প্রোপার্টি

Change overflow বাটনে ক্লিক করুন overflow CSS প্রোপার্টির মান scroll থেকে hidden এ পরিবর্তন করতে।

HTML DOM Style overflow প্রোপার্টি


  1. HTML DOM Style outline প্রোপার্টি

  2. HTML DOM Style textDecorationColor প্রোপার্টি

  3. HTML DOM Style transformStyle প্রোপার্টি

  4. HTML DOM Style transformOrigin প্রোপার্টি