HTML DOM Details open প্রপার্টি HTML
open প্রপার্টির সাথে যুক্ত। এটি একটি বুলিয়ান অ্যাট্রিবিউট এবং বিশদটি ব্যবহারকারীর কাছে দৃশ্যমান হবে কিনা তা নির্দিষ্ট করার জন্য ব্যবহৃত হয়। সত্য হিসাবে সেট করা হলে বিশদগুলি ব্যবহারকারীর কাছে দৃশ্যমান হয়৷ যাইহোক, এটিকে মিথ্যাতে সেট করার অর্থ ব্যবহারকারীর কাছ থেকে বিস্তারিত লুকিয়ে রাখা।
সিনট্যাক্স
−
-এর সিনট্যাক্স নিচে দেওয়া হলবিস্তারিত খোলা সম্পত্তি সেট করা -
detailsObject.open = true|false
এখানে, true=Details দেখানো হবে এবং false=Details লুকানো হবে। বিশদ ডিফল্টরূপে লুকানো হয়৷
৷উদাহরণ
আসুন বিস্তারিত খোলা সম্পত্তি -
-এর জন্য একটি উদাহরণ দেখি<!DOCTYPE html> <html> <body> <h2>Details open() property</h2> <details id="Details1"> <summary>Eiffel Tower</summary> <p style="color:blue">The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower. </p> </details> <p>Click the below button to set the details to be visible to the user</p> <button onclick="setDetail()">Visible</button> <script> function setDetail() { document.getElementById("Details1").open = true; } </script> </body> </html>
আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
"দৃশ্যমান" বোতামে ক্লিক করলে -
উপরের উদাহরণে -
আমরা “Details1” আইডি সহ একটি <বিস্তারিত<উপাদান তৈরি করেছি এবং এতে <সারাংশ<এবং একটি
<details id="Details1"> <summary>Eiffel Tower</summary> <p style="color:blue">The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris, France. It is named after the engineer Gustave Eiffel, whose company designed and built the tower. </p> </details>
তারপরে আমরা "দৃশ্যমান" বোতামটি তৈরি করেছি যা ব্যবহারকারী দ্বারা ক্লিক করলে setDetail() ফাংশনটি কার্যকর করবে -
<button onclick="setDetail()">Visible</button>
setDetail() ফাংশন getElementById() ব্যবহার করে
এলিমেন্ট পায় এবং এর ওপেন এট্রিবিউটের মান সত্যে সেট করে। এটি ব্যবহারকারীর কাছে <বিস্তারিত> ভিতরে তথ্য প্রদর্শন করে −
function setDetail() { document.getElementById("Details1").open = true; }