HTML DOM div অবজেক্ট HTML <div> এলিমেন্টের সাথে জড়িত। Div একটি জেনারেল পর্পজ ব্লক লেভেল এলিমেন্ট যা আমাদের এলিমেন্টগুলো গ্রুপ করতে দিয়ে যাতে সেগুলোর ওপর স্টাইল প্রয়োগ করা যায় বা HTML এলিমেন্টের একটি গ্রুপকে একক ট্যাগ নেম বা id-এর অধীনে ম্যানিপুলেট করা যায়।
প্রপার্টি
div অবজেক্টের প্রপার্টি:
| প্রপার্টি | বিবরণ |
|---|---|
| Align | <div> এলিমেন্টের align অ্যাট্রিবিউটের মান সেট বা রিটার্ন করতে। এই প্রপার্টি HTML5-এ সাপোর্টেড নয়, অ্যালাইনমেন্টের জন্য CSS ব্যবহার করুন। |
সিনট্যাক্স
div অবজেক্ট তৈরির সিনট্যাক্স:
var p = document.createElement("DIV");উদাহরণ
HTML DOM div অবজেক্টের উদাহরণ:
<!DOCTYPE html> <html> <body> <h2>Div অবজেক্ট উদাহরণ</h2> <p>CREATE বাটনে ক্লিক করে কিছু টেক্সট সহ div এলিমেন্ট তৈরি করুন।</p> <button onclick="createDiv()">CREATE</button> <script> function createDiv() { var d = document.createElement("DIV"); var txt = document.createTextNode("Sample Div element"); d.setAttribute("style", "margin:10px;width:200px;background-color: lightgreen;border:2px solid blue"); d.appendChild(txt); document.body.appendChild(d); } </script> </body> </html>আউটপুট
এটি নিচের আউটপুট তৈরি করবে:
CREATE বাটনে ক্লিক করলে:
উপরের উদাহরণে:
প্রথমে CREATE বাটন তৈরি করা হয়েছে যা ইউজার ক্লিক করলে createDiv() মেথড এক্সিকিউট করবে:
<button onclick="createDiv()">CREATE</button>
createDiv() ফাংশন একটি <div> এলিমেন্ট তৈরি করে এবং d ভেরিয়েবলে অ্যাসাইন করে। তারপর একটি টেক্সট নোড তৈরি করে txt ভেরিয়েবলে অ্যাসাইন করে। setAttribute() মেথড ব্যবহার করে <div> এলিমেন্টের অ্যাট্রিবিউট সেট করা হয়েছে। টেক্সট নোডটি appendChild() মেথড দিয়ে <div> এলিমেন্টে সংযুক্ত করা হয়েছে। <div> এলিমেন্টটি টেক্সট নোডসহ ডকুমেন্ট বডির চাইল্ড হিসেবে অ্যাপেন্ড করা হয়েছে:
function createDiv() { var d = document.createElement("DIV"); var txt = document.createTextNode("Sample Div element"); d.setAttribute("style", "margin:10px;width:200px;background-color: lightgreen;border:2px solid blue"); d.appendChild(txt); document.body.appendChild(d); } 