HTML DOM div অবজেক্টটি HTML
উপাদানের সাথে যুক্ত। Div হল একটি সাধারণ উদ্দেশ্য ব্লক স্তরের উপাদান যা আমাদেরকে উপাদানগুলিকে একত্রে গোষ্ঠীবদ্ধ করতে দেয় তাদের উপর শৈলী প্রয়োগ করতে বা একটি একক ট্যাগ নাম বা আইডির অধীনে এইচটিএমএল উপাদানগুলির একটি গ্রুপ পরিচালনা করতে৷
সম্পত্তি
নিচে div অবজেক্ট -
এর জন্য সম্পত্তি| সম্পত্তি | বিবরণ |
|---|---|
| সারিবদ্ধ করুন | এলিমেন্টের অ্যালাইন অ্যাট্রিবিউট মান সেট করতে বা ফেরত দিতে। এই বৈশিষ্ট্যটি HTML5 সমর্থিত নয় এর পরিবর্তে সারিবদ্ধ করার জন্য css ব্যবহার করুন৷ | ৷
সিনট্যাক্স
−
-এর সিনট্যাক্স নিচে দেওয়া হলএকটি div অবজেক্ট তৈরি করা -
var p = document.createElement("DIV"); উদাহরণ
আসুন HTML DOM div অবজেক্ট -
-এর একটি উদাহরণ দেখি<!DOCTYPE html>
<html>
<body>
<h2>Div object example</h2>
<p>click on the CREATE button to create a div element with some text in it.</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> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
ক্রিয়েট বোতামে ক্লিক করলে -
উপরের উদাহরণে -
আমরা প্রথমে একটি ক্রিয়েট বোতাম তৈরি করেছি যা ব্যবহারকারী দ্বারা ক্লিক করলে createDiv() পদ্ধতিটি কার্যকর করবে -
<button onclick="createDiv()">CREATE</button>
createDiv() ফাংশন একটি
উপাদান তৈরি করে এবং এটি ভেরিয়েবল d-এ বরাদ্দ করে। এটি তারপর একটি পাঠ্য নোড তৈরি করে এবং এটি পরিবর্তনশীল txt-এ বরাদ্দ করে। আমরা তারপর setAttribute() পদ্ধতি ব্যবহার করে
উপাদানের বৈশিষ্ট্যগুলি সেট করি। টেক্সট নোড তারপর appendChild() পদ্ধতি ব্যবহার করে
উপাদানের সাথে যুক্ত করা হয়। পাঠ্য নোডের সাথে
উপাদানটি তারপর ডকুমেন্ট বডি চাইল্ড হিসাবে যুক্ত করা হয় −
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);
} 