HTML DOM Figcaption অবজেক্টটি HTML5
সিনট্যাক্স
−
-এর সিনট্যাক্স নিচে দেওয়া হলএকটি Figcaption অবজেক্ট তৈরি করা -
var p = document.createElement("FIGCAPTION"); উদাহরণ
ফিগক্যাপশন অবজেক্ট -
-এর জন্য একটি উদাহরণ দেখা যাক<!DOCTYPE html>
<html>
<head>
<script>
function createCaption() {
var caption = document.createElement("FIGCAPTION");
var txt = document.createTextNode("Learn Java Servlets");
caption.appendChild(txt);
var f=document.getElementById("Figure1");
f.appendChild(caption);
}
</script>
</head>
<body>
<h2>Caption</h2>
<p>Create a caption for the below image by clicking the below button</p>
<button onclick="createCaption()">CREATE</button>
<figure id="Figure1">
<img src="https://www.tutorialspoint.com/servlets/images/servlets-mini-logo.jpg"
alt="Servlets" width="250" height="200">
</figure>
</body>
</html> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
ক্রিয়েট বোতামে ক্লিক করলে -
উপরের উদাহরণে -
আমরা প্রথমে “Figure1” আইডি সহ একটি চিত্র উপাদান তৈরি করেছি এবং এটির ভিতরে একটি img উপাদান রয়েছে -
<figure id="Figure1"> <img src="EiffelTower.jpg" alt="Eiffel Tower" width="250" height="200"> </figure>
তারপরে আমরা একটি বোতাম তৈরি করি CREATE() যা ব্যবহারকারী দ্বারা ক্লিক করলে createCaption() পদ্ধতিটি কার্যকর করবে -
<button onclick="createCaption()">CREATE</button>
createCaption() পদ্ধতি ডকুমেন্ট অবজেক্টের createElement() পদ্ধতি ব্যবহার করে একটি figcaption উপাদান তৈরি করে। ডকুমেন্ট বডির createTextNode() পদ্ধতি ব্যবহার করে একটি টেক্সট নোড তৈরি করা হয় এবং ফিগক্যাপশন এলিমেন্টে যুক্ত করা হয়। তারপর আমরা getElementById() পদ্ধতি ব্যবহার করে চিত্রের উপাদানটি পাই এবং appendChild() পদ্ধতি ব্যবহার করে চাইল্ড এলিমেন্ট হিসাবে টেক্সট নোডের সাথে figcaption যুক্ত করি -
function createCaption() {
var caption = document.createElement("FIGCAPTION");
var txt = document.createTextNode("Eiffel Tower in Paris,France");
caption.appendChild(txt);
var f=document.getElementById("Figure1");
f.appendChild(caption);
} 