ট্যাগ অ্যাট্রিবিউটসমূহ জাভাস্ক্রিপ্টে প্রোপার্টি হিসেবে
আসুন এখন শিখি কিভাবে ট্যাগের অ্যাট্রিবিউট নিতে হয়। এখানে নিম্নলিখিত নিয়ম প্রযোজ্য: প্রতিটি ট্যাগ অ্যাট্রিবিউট DOM এলিমেন্টের একই নামের একটি প্রোপার্টির সাথে সঙ্গতিপূর্ণ।
আসুন একটি উদাহরণ দেখি। ধরা যাক আমাদের নিম্নলিখিত ট্যাগটি আছে:
<input id="elem" type="text">
আমাদের এলিমেন্টের রেফারেন্স একটি ভেরিয়েবলে নিই:
let elem = document.querySelector('#elem');
আমাদের প্রয়োজনীয় অ্যাট্রিবিউটগুলোর মান আউটপুট করি:
console.log(elem.id); // আউটপুট দেবে 'elem'
console.log(elem.type); // আউটপুট দেবে 'text'
এবং এখন উদাহরণস্বরূপ অ্যাট্রিবিউটের মান পরিবর্তন করি:
elem.type = 'submit';
নিম্নলিখিত ইনপুটটি দেওয়া আছে:
<input id="elem" type="email">
একটি বাটনও দেওয়া আছে। বাটনে ক্লিক করে
উপরের ইনপুটের type অ্যাট্রিবিউটের
বিষয়বস্তু স্ক্রিনে আউটপুট করুন।
নিম্নলিখিত ইনপুটটি দেওয়া আছে:
<input id="elem" type="email">
একটি বাটনও দেওয়া আছে। বাটনে ক্লিক করে
type অ্যাট্রিবিউটে submit
মানটি লিখুন।
ধরা যাক আপনার কাছে a ট্যাগের একটি লিঙ্ক,
একটি বাটন এবং একটি প্যারাগ্রাফ আছে। বাটনে ক্লিক করে
লিঙ্কের href অ্যাট্রিবিউটের বিষয়বস্তু
প্যারাগ্রাফে আউটপুট করুন।
ধরা যাক আপনার কাছে একটি লিঙ্ক এবং একটি বাটন আছে। ক্লিক
করলে লিঙ্কের টেক্সটের শেষে এর href অ্যাট্রিবিউটের
বিষয়বস্তু বৃত্তাকার
বন্ধনীতে যোগ করুন।
ধরা যাক আপনার কাছে একটি ছবি আছে। এটিকে
img ট্যাগ ব্যবহার করে পৃষ্ঠায় রাখুন।
একটি বাটন এবং একটি প্যারাগ্রাফও দেওয়া আছে। বাটনে ক্লিক করলে
এর src অ্যাট্রিবিউট থেকে ছবির
পথটি প্যারাগ্রাফে লেখা হবে তা নিশ্চিত করুন।
img ট্যাগে একটি ছবি এবং একটি বাটন দেওয়া আছে।
বাটনে ক্লিক করলে width
অ্যাট্রিবিউটে 300 মানটি লিখুন।
img ট্যাগে একটি ছবি এবং একটি বাটন দেওয়া আছে।
ধরা যাক width অ্যাট্রিবিউটে কিছু
প্রস্থ নির্ধারণ করা আছে। একটি বাটন তৈরি করুন, যাতে ক্লিক করলে
ছবির প্রস্থ 2 গুণ বেড়ে যাবে।
ধরা যাক আপনার কাছে দুটি ছবি আছে। পৃষ্ঠায়
img ট্যাগ এবং দুটি বাটন তৈরি করুন।
প্রথম বাটনে ক্লিক করলে src অ্যাট্রিবিউটে
প্রথম ছবির পথ লিখুন, এবং দ্বিতীয় বাটনে ক্লিক করলে
- দ্বিতীয় ছবির পথ লিখুন।