HTML DOM Details অবজেক্ট

HTML DOM Details অবজেক্ট HTML <details> এলিমেন্টের সাথে সম্পর্কিত। এটি আমাদের তথ্য লুকাতে দেয় যা শুধু ইউজার দেখতে চাইলে প্রদর্শিত হবে।

প্রপার্টি

Details অবজেক্টের প্রপার্টি:

সিনট্যাক্স

Details অবজেক্ট তৈরি করার সিনট্যাক্স:

var p = document.createElement("DETAILS");

উদাহরণ

HTML DOM Details অবজেক্টের উদাহরণ:

<!DOCTYPE html> <html> <body> 
<h2>Details object</h2> 
<p>Click the below button to create a DETAILS element about a monument</p> 
<button onclick="detCreate()">CREATE</button> 
<br><br> 
<script> 
  function detCreate() { 
    var et = document.createElement("DETAILS"); 
    var sum=document.createElement("SUMMARY"); 
    var sumText=document.createTextNode("Eiffel Tower"); 
    var txt = document.createTextNode("It is one of the most popular monument in the world"); 
    sum.appendChild(sumText); 
    et.appendChild(txt); 
    document.body.appendChild(sum); 
    document.body.appendChild(et); 
  } 
</script> 
</body> </html>

আউটপুট

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

CREATE বাটনে ক্লিক করলে এবং তারপর অ্যারোতে ক্লিক করে ডিটেইলস এক্সপ্যান্ড করলে:

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

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

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

detCreate() ফাংশন document অবজেক্টের createElement() মেথড ব্যবহার করে <details> এলিমেন্ট তৈরি করে এবং et ভেরিয়েবলে অ্যাসাইন করে। আমরা আবার একটি <summary> এলিমেন্ট তৈরি করি যা <details> এলিমেন্টের অংশ এবং তার ভিতরে থাকে, createElement() মেথড ব্যবহার করে এবং sum ভেরিয়েবলে অ্যাসাইন করি।

তারপর দুটি টেক্সট নোড sumText এবং txt তৈরি করি যা যথাক্রমে <summary> এবং <details> এলিমেন্টে অ্যাপেন্ড করা হয়। নতুন তৈরি <summary> এবং <details> এলিমেন্টগুলো document body-তে appendChild() মেথড ব্যবহার করে অ্যাপেন্ড করা হয় প্যারামিটার হিসেবে এলিমেন্টগুলো পাস করে:

function detCreate() { 
  var et = document.createElement("DETAILS"); 
  var sum=document.createElement("SUMMARY"); 
  var sumText=document.createTextNode("Eiffel Tower"); 
  var txt = document.createTextNode("It is one of the most popular monument in the world"); 
  sum.appendChild(sumText); 
  et.appendChild(txt); 
  document.body.appendChild(sum); 
  document.body.appendChild(et); 
}