এইচটিএমএল ডোম Image অবজেক্ট
Image অবজেক্ট
Image অবজেক্ট এইচটিএমএল <img> এলিমেন্টকে প্রতিনিধিত্ব করে।
Image অবজেক্ট তৈরি
আপনি document.createElement() মেথড ব্যবহার করে <img> এলিমেন্ট তৈরি করতে পারেনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<p><button onclick="myFunc()">ক্লিক করুন</button></p>
<script>
function myFunc() {
var a = document.createElement("img");
a.setAttribute("src", "../../images/satt.png");
a.setAttribute("width", "140");
a.setAttribute("height", "170");
a.setAttribute("alt", "sattacademy image");
document.body.appendChild(a);
}
</script>
</body>
</html>ফলাফল
Image অবজেক্ট এক্সেস
আপনি getElementById() ব্যবহার করে <img> এলিমেন্টকে এক্সেস করতে পারেনঃ
উদাহরণ
<!DOCTYPE html>
<html>
<head>
<title>জাভাস্ক্রিপ্ট উদাহরণ</title>
</head>
<body>
<img id="test" src="../../images/satt.png" alt="sattacademy image" width="140" height="170">
<p><button onclick="myFunc()">ক্লিক করুন</button></p>
<p id="test2"></p>
<script>
function myFunc() {
var a = document.getElementById("test").src;
document.getElementById("test2").innerHTML = a;
}
</script>
</body>
</html>ফলাফল
পরামর্শঃ images collection ব্যবহার করে আপনি <img> এলিমন্টকে এক্সেস করতে পারেন।
ইমেজ অবজেক্ট প্রোপার্টি
| প্রোপার্টি | বর্ণনা |
|---|---|
| align | এইচটিএমএল(৫) এ সাপোর্ট করে না । এর পরিবর্তে
style.cssFloat ব্যবহার করুন। একটি image এর align এট্রিবিউটের ভ্যালু সেট বা রিটার্ন করে। |
| alt | একটি image এর alt এট্রিবিউটের ভ্যালু সেট বা রিটার্ন করে। |
| border | এইচটিএমএল(৫) এ সাপোর্ট করে না। এর পরিবর্তে style.border ব্যবহার করুন। একটি image এর border এট্রিবিউটের ভ্যালু সেট বা রিটার্ন করে। |
| complete | ব্রাউজারে একটি image সম্পূর্ন লোড হবে কিনা রিটার্ন করে। |
| crossOrigin |  একটি image এর CORS সেটিং সেট বা রিটার্ন করে। |
| height | একটি image এর height এট্রিবিউটের ভ্যালু সেট বা রিটার্ন করে। |
| hspace | এইচটিএমএল(৫) এ সাপোর্ট করে না। এর পরিবর্তে
style.margin ব্যবহার করুন। একটি image এর hspace এট্রিবিউটের ভ্যালু সেট বা রিটার্ন করে। |
| longDesc | এইচটিএমএল(৫) এ সাপোর্ট করে না। একটি image এর longdesc এট্রিবিউটের ভ্যালু সেট বা রিটার্ন করে। |
| name | এইচটিএমএল(৫) এ সাপোর্ট করে না। এর পরিবর্তে id ব্যবহার করুন । একটি image এর name এট্রিবিউটের ভ্যালু সেট বা রিটার্ন করে। |
| naturalHeight | একটি image এর মূল height রিটার্ন করে। |
| naturalWidth | একটি image এর মূল width রিটার্ন করে। |
| src | একটি image এর src এট্রিবিউটের ভ্যালু সেট বা রিটার্ন করে। |
| useMap | একটি image এর usemap এট্রিবিউটের ভ্যালু সেট বা রিটার্ন করে। |
| vspace | এইচটিএমএল(৫) এ সাপোর্ট করে না। এর পরিবর্তে
style.margin ব্যবহার করুন । একটি image এর vspace এট্রিবিউটের ভ্যালু সেট বা রিটার্ন করে। |
| width | একটি image এর width এট্রিবিউটের ভ্যালু সেট বা রিটার্ন করে। |
স্ট্যান্ডার্ড প্রোপার্টি এবং ইভেন্ট
| প্রোপার্টি | ইভেন্ট |
|---|---|
| সাপোর্ট করে। এখানে দেখুন | সাপোর্ট করে। এখানে দেখুন |