HTML DOM createAttribute() মেথড

HTML DOM createAttribute() মেথড একটি HTML এলিমেন্টের জন্য জাভাস্ক্রিপ্ট ব্যবহার করে একটি নির্দিষ্ট অ্যাট্রিবিউট তৈরি করতে ব্যবহৃত হয়। createAttribute() মেথড দেওয়া নামের সাথে একটি অ্যাট্রিবিউট তৈরি করে এবং অ্যাট্রিবিউটটিকে একটি Attr অবজেক্ট হিসেবে রিটার্ন করে।

সিনট্যাক্স

createAttribute() মেথডের সিনট্যাক্স নিচে দেওয়া হলো -

document.createAttribute(attributename)

উদাহরণ

HTML DOM createAttribute() মেথডের একটি উদাহরণ দেখি -

<!DOCTYPE html> <html> <head> <title>CREATE ATTRIBUTE</title> <style> #DIV1{ margin-top:15px; width:250px; height:200px; border:2px solid blue; background-color:lightgreen; } </style> </head> <body> <p>নিচের বাটনে ক্লিক করুন div এলিমেন্টের জন্য "class" অ্যাট্রিবিউট তৈরি করতে</p> <button onclick="attrCreate()">CREATE</button> <br> <div> <p>This is a sample div</p> </div> <script> function attrCreate() { var x = document.getElementsByTagName("div")[0]; var att = document.createAttribute("id"); att.value = "DIV1"; x.setAttributeNode(att); } </script> </body> </html>

আউটপুট

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

CREATE বাটনে ক্লিক করলে -

উপরের উদাহরণে -

আমরা "DIV1" আইডি সহ একটি স্টাইল তৈরি করেছি -

#DIV1{ margin-top:15px; width:250px; height:200px; border:2px solid blue; background-color:lightgreen; }

তারপর আমরা একটি <div> এলিমেন্ট তৈরি করেছি যার ভিতরে একটি <p> এলিমেন্ট রয়েছে।

<div> <p>This is a sample div</p> </div>

তারপর, আমরা একটি CREATE বাটন তৈরি করেছি যা ইউজার ক্লিক করলে attrCreate() ফাংশন এক্সিকিউট করবে -

<button onclick="attrCreate()">CREATE</button>

attrCreate() ফাংশন ডকুমেন্ট অবজেক্টের getElementsByTagName() মেথড ব্যবহার করে <div> এলিমেন্টটি পেয়ে ভেরিয়েবল x-এ অ্যাসাইন করে। createAttribute() মেথড ব্যবহার করে আমরা "id" অ্যাট্রিবিউট তৈরি করি এবং এর value প্রপার্টি ব্যবহার করে এটিকে "DIV1" ভ্যালু অ্যাসাইন করি, যা আগে তৈরি করা স্টাইলের আইডি। অবশেষে, আমরা "id" অ্যাট্রিবিউটটি এর ভ্যালুসহ <div> এলিমেন্টে সেট করি -

function attrCreate() { var x = document.getElementsByTagName("div")[0]; var att = document.createAttribute("id"); att.value = "DIV1"; x.setAttributeNode(att); }