HTML এ কাস্টম অ্যাট্রিবিউট কিভাবে ব্যবহার করবেন

HTML এ আপনি কাস্টম বৈশিষ্ট্য তৈরি করতে পারেন। তারপর আপনি শৈলীতে CSS ব্যবহার করতে পারেন, অথবা সেই বৈশিষ্ট্যগুলির আচরণ নিয়ন্ত্রণ করতে JavaScript ব্যবহার করতে পারেন।

আপনি আপনার কাস্টম বৈশিষ্ট্যগুলিকে আপনি যা চান তা বলতে পারেন, তবে, কাস্টম বৈশিষ্ট্যের নামগুলির আগে একটি data- লিখতে হবে লেবেল:

<tag data-custom-attribute-name="value">Content</tag>

উদাহরণস্বরূপ, ধরা যাক আমাদের “আপেল” নামে একটি খাদ্য উপাদান আছে . যখন একজন ব্যবহারকারী এটিতে ক্লিক করেন, আমরা কি টাইপ প্রদর্শন করতে চাই খাবারের এটি একটি পপআপ ডায়ালগ বক্সে রয়েছে৷

এটি করার জন্য আমরা food-type নামে একটি কাস্টম অ্যাট্রিবিউট তৈরি করব ( data- মনে রাখবেন লেবেল) এবং এটি একটি <div> এ যোগ করুন Apple সহ উপাদান ভিতরে পাঠ্য:

<div onclick="showDetailsBox(this)" id="apple" data-food-type="fruit">
  Apple
</div>

এবং জাভাস্ক্রিপ্ট যে বৈশিষ্ট্যটি কাজ করে:

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

এখানে একটি ডেমো।

এইচটিএমএল কোড কিভাবে কাজ করে:

• প্রথম, আমরা একটি onclick যোগ করেছি <div>-এর বৈশিষ্ট্য উপাদান এটি একটি ইভেন্ট অ্যাট্রিবিউট যা একটি ইভেন্ট শ্রোতাকে সংযুক্ত করে যা শোনে... আপনি এটি অনুমান করেছেন, ক্লিক করুন!
• তারপর আমরা showDetailsBox(this) এর একটি অ্যাট্রিবিউট মান বরাদ্দ করি onclick-এ বৈশিষ্ট্য।
• showDetailsBox() জাভাস্ক্রিপ্ট ফাংশনের নাম যা আপনি Apple টেক্সট এলিমেন্টে ক্লিক করার সাথে সাথেই কল হয়ে যায়।
• এই this (this) এর অংশ একটি যুক্তি যা এটির (এটি) অন্তর্গত বস্তুকে বোঝায় নতুনদের জন্য একটু উন্নত, না বুঝলে ঠিক আছে)।
• id HTML উপাদানগুলির জন্য একটি অনন্য আইডি নির্দিষ্ট করতে ব্যবহৃত একটি অন্তর্নির্মিত HTML বৈশিষ্ট্য। এই ক্ষেত্রে, আমাদের অনন্য আইডি হল apple .

কিভাবে জাভাস্ক্রিপ্ট কোড কাজগুলি এই HTML টিউটোরিয়ালের সুযোগের বাইরে, তাই আমি আপনাকে একটি সরলীকৃত ব্যাখ্যা দেব:

যখন showDetailsBox() ফাংশনটিকে onclick দ্বারা ডাকা হয় ইভেন্ট অ্যাট্রিবিউট, এটি তার কোড ব্লক { ... } নির্বাহ করে বিষয়বস্তু:

function showDetailsBox(food) {
  ...
}

কোড ব্লকের ভিতরের প্রথম লাইনে, JavaScript কাস্টম data-food-type সহ যেকোনো HTML উপাদান নির্বাচন করে। বৈশিষ্ট্য, এবং এটিকে (এবং এর বৈশিষ্ট্যের মান) foodType নামক একটি ভেরিয়েবলে বরাদ্দ করে। :

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  ...
}

দ্বিতীয় লাইনে আমরা বিল্ট-ইন alert() চালাই পদ্ধতি (যা পপআপ ডায়ালগ বক্সকে অনুরোধ করে এবং foodType এর মান প্রদর্শন করতে বলুন যা অবশ্যই, fruit :

function showDetailsBox(food) {
  const foodType = food.getAttribute("data-food-type")
  alert(food.innerHTML + " is a " + foodType)
}

চিন্তা করবেন না যদি আপনি উপরের পুরো কোড উদাহরণটি সম্পূর্ণরূপে বুঝতে না পারেন, হজম করার জন্য অনেক কিছু আছে, বিশেষ করে একজন শিক্ষানবিশের জন্য। অনুশীলনের সাথে, এটি অর্থপূর্ণ হবে!

HTML অ্যাট্রিবিউট সম্পর্কে আরও বিস্তৃত তথ্যের জন্য, আমি MDN ওয়েব ডক্স HTML অ্যাট্রিবিউট রেফারেন্সের মাধ্যমে খনন করার পরামর্শ দিচ্ছি।

গুরুত্বপূর্ণ: ডেটা অ্যাট্রিবিউটের মধ্যে দৃশ্যমান এবং অ্যাক্সেসযোগ্য হওয়া উচিত এমন গুরুত্বপূর্ণ সামগ্রী সংরক্ষণ করবেন না, কারণ সহায়ক প্রযুক্তি কখনও কখনও তাদের অ্যাক্সেস করে না। ক্রলার অনুসন্ধান করুন হতে পারে৷ এছাড়াও সূচী ডেটা বৈশিষ্ট্য মান না — তাই এখানে কোনো গুরুত্বপূর্ণ SEO বিষয়বস্তু রাখবেন না।