HTML DOM Style objectPosition প্রপার্টি একটি HTML ডকুমেন্টে একটি ইমেজ বা ভিডিও এলিমেন্ট তার নিজস্ব কন্টেন্ট বক্সে কীভাবে পজিশন করা উচিত তা রিটার্ন এবং মডিফাই করে।
সিনট্যাক্স
নিচে সিনট্যাক্স দেওয়া হলো:
১. objectPosition রিটার্ন করা
object.objectPosition
২. objectPosition মডিফাই করা
object.objectPosition = “value”
এখানে value হতে পারে:
| মান | ব্যাখ্যা |
|---|---|
| Initial | এটি এই প্রপার্টির মানকে এর ডিফল্ট মান সেট করে। |
| Inherit | এটি এই প্রপার্টির মানকে এর প্যারেন্ট এলিমেন্ট থেকে ইনহেরিট করে। |
| Position | এটি ইমেজ বা ভিডিও এলিমেন্টের পজিশন রিপ্রেজেন্ট করে তার কন্টেন্ট বক্সের ভিতরে। |
HTML DOM Style objectPosition প্রপার্টির একটি উদাহরণ দেখা যাক:
উদাহরণ
<!DOCTYPE html> <html> <style> body { color: #000; height: 100vh; background-color: #8BC6EC; background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%); text-align: center; } .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; } .img-class { width: 200px; height: 250px; object-fit: cover; } </style> <body> <h1 style="text-align:center">DOM Style objectPosition প্রপার্টি ডেমো</h1> <img alt="Learn Java Swing" src="https://www.tutorialspoint.com/swing/images/swing-mini-logo.jpg" class="img-class" width='300' height='200'> <button class="btn" onclick="set()">objectPosition সেট করুন</button> <script> function set() { document.querySelector('.img-class').style.objectPosition = "100% 100%"; } </script> </body> </html>আউটপুট
objectPosition সেট করুন বাটনে ক্লিক করুন ইমেজ এলিমেন্টে object position প্রপার্টি সেট করার জন্য:
