استفاده از خاصیت های دلخواه در HTML5

بسم الله الرحمن الرحیم

یکی از مهمترین امکانی که به HTML5 اضافه شده خاصیت های (Attibute) دلخواهی که می شه به تگ ها اضافه کرد است. که در این پست در این مورد بحث خواهیم کرد و دستورات جاوااسکریپ در این رابطه در مورد چگونگی دسترسی به محتوای خاصیت مربوطه و حذف و یا تغییر محتواش خواهیم پرداخت و نمونه کدهایی هم در این مورد خواهیم داشت.

البته قبل از HTML5 می شد به تگ ها خاصیت هایی به نام هایی که می خواستیم افزود که در این صورت باید قید معتبر (Valid) بودن صفحه و کدهامون رو می زدیم، که در HTML5 این موضوع حل شده و مشکلی از لحاظ معتبر بودن صفحه مون نخواهیم داشت.

ایجاد یه تگ با خاصیت دلخواه
اول از همه یه تگ div در قسمت body ایجاد کرده و همینطور یک ID هم بهش می دیم که بتونیم از طریق جاوااسکریپت تگ مربوطه رو شناسایی کنیم و attribute رو هم به اسم و مقدار data-adeveloper-fisrt-post="HTML5 Attributes" بهش می دیم:

<div id="adeveloper" data-adeveloper-fisrt-post="HTML5 Attributes">
The First Blog Post Of Adeveloper.org
</div>

همونطوری که می بینید خاصیت (Attribute) اضافه شده به تگ با مقدار data-* شروع می شه و بجای ستاره هم اسم یا اسامی دلخواهمون رو که می خواهیم خاصیت مربوطه داشته باشه رو اضافه کرده و سپس مقدار مون رو هم بهش اختصاص می دیم.

که تنها راه معتبر در HTML5 برای افزودن خاصیت به تگ هامون به این شیوه هستش و باید این نکته رو رعایت کنیم، در غیر اینصورت کدمون معتبر نخواهد بود.

همینطور بهتره قبل از استفاده از این روش مطمئن شید که خاصیت های استاندارد ای برای کاری که می خواهید انجام بدید وجود نداشته باشه و سپس خاصیت دلخواهتون رو به روش فوق به تگ مورد نظر اضافه کنید.

و اسم خاصیت مورد نظر باید حداقل یک کاراکتر باشه و همونطو که گفته شد data- به ابتداش افزوده شده باشه و همینطور در اسم خاصیت نباید از حروف بزرگ استفاده بشه.

مقدار خاصیت هم، هر کاراکتری می تونه تو خودش داشته باشه و محدودتی درش وجود نداره.


جاوااسکریپت
برای نشون دادن کار کدهای جاوااسکریپت که در رویداد خاصی اتفاق بیفتن یه دکمه به صفحه مون اضافه می کنیم که هنگام فشرده شدن، تابع مودنظرمون رو در جاوااسکریپت صدا کرده و همینطور نام ID ای که به تگ فوق داده بودیم رو هم به تابع مربوطه تحویل بده:

<input type="button" value="Execute JS Code" onclick="ourJsDunction('adeveloper')">

برای دریافت مقدار خاصیت تعریف شده در تگ DIV از دو روش زیر می تونیم استفاده کنیم:

- استفاده از getAttribute
راه مرسوم برای دریافت خاصیت ها در جاوااسکریپت استفاده از تابع getAttribute هستش که در این روش از این تابع برای گرفتن مقدار خاصیت مربوطه استفاده خواهیم کرد. که در تکه کد زیر نحوه انجام این کار نشون داده شده:

function ourJsFunction(tagID)
{
var ourDiv = document.getElementById(tagID),
attributeValue = ourDiv.getAttribute('data-adeveloper-fisrt-post');

console.log(attributeValue);
}
و همونطوری که می بینید، مقدار گرفته شده توسط دستور console.log در کنسول مرورگر نمایش داده خواهد شد.

- استفاده از Dataset
راه دیگه استفاده از ویژگی (Property) بنام dataset در تگ مربوطه هست. البته این روش رو فعلا مرورگرهای زیادی ساپورت نمی کنن و برای استفاده از این روش بهتره به فکر مرورگرهای دیگه هم باشید و از راه حل های جایگزین برای مرورگرهایی که ساپورت نمی کنن استفاده کنید.

تکه کد زیر دقیقا کاری رو که تابع نوشته شده فوق انجام می ده رو نشون می ده:

function ourJsFunction(tagID)
{
var ourDiv = document.getElementById(tagID),
/* This Part Of code is changed. */
attributeValue = ourDiv.dataset.adeveloperFisrtPost;

console.log(attributeValue);
}

در این روش dataset برای اشاره به خاصیت مورد نظر از طریق دستورات جاوااسکریپت، کلمه data- رو از اول اسم خاصیت تعریف شده حذف می کنیم و در صورتی که در اسم خاصیت ای (Attribute) که تعیین کرده ایم از خط تیره ( - ) استفاده شده باشه، باید بصورت Camal-Case در جاوااسکریپت نوشته بشه.

دقیقا مثل مثال فوق که نام خاصیت data-adeveloper-fisrt-post هستش، که ابتدا کلمه data- رو از ابتدای اسم خاصیت حذف کرده و سپس بخاطر اینکه از خط تیره ( - ) در اسم خاصیت استفاده شده، باید بصورت Camal-Case نوشته بشه که در نهایت اسم خاصیت از data-adeveloper-fisrt-post به adeveloperFisrtPost تبدیل می شه.

به این نکته توجه کنید که این تبدیل، برای اشاره به خاصیت مورد نظر و برای دستورات JavaScript هست و در طرف HTML نبایستی تغییری کنه.


دیگر توابع و متدها
تا اینجای کار، با نحوه دریافت مقادیر خاصیت هایی که تعریف کرده بودم آشنا شدیم. اما این تمام کاری که می شه با خاصیت های تعریف شده کرد نیست و بلکه می شه مقادیر خاصیت ها رو تغییر و یا حتی حذفشون کرد.

توسط تکه دستورات زیر می تونیم مقادیر خاصیت هایی که تعریف کرده ایم رو تغییر بدیم:

این تکه کد با استفاده از تابع setAttribute مقدار خاصیت مورد نظرمون رو تغییر می ده:

function ourJsFunction(tagID)
{
var ourDiv = document.getElementById(tagID);
/*This part of the code, changes the value of the attribute using setAttribute function.*/
ourDiv.setAttribute('data-adeveloper-fisrt-post', 'The New Value To Be Replaced With');
}

و برای تغییر دادن مقدار خاصیت مورد نظر از طریق dataset به روش زیر می تونیم عمل کنیم:

function ourJsFunction(tagID)
{
var ourDiv = document.getElementById(tagID);
/*This part of the code, changes the value of the attribute using dataset property.*/
ourDiv.dataset.adeveloperFisrtPost = 'The New Value To Be Replaced With';
}

همچنین برای حذف خاصیت مورد نظر می تونیم از تابع removeAttribute استفاده کرده و یا از طریق dataset مقدار خاصیت رو برابر Null قرار بدیم:

تکه کد زیر برای حذف خاصیت مورد نظر با استفاده از removeAttribute :

function ourJsFunction(tagID)
{
var ourDiv = document.getElementById(tagID);
/*Removing the Attribute using the removeAttribute*/
ourDiv.removeAttribute('data-adeveloper-fisrt-post');
}

و همچنین تکه کد زیر برای خذف خاصیت مورد نظرمون با استفاده از dataset :

function ourJsFunction(tagID)
{
var ourDiv = document.getElementById(tagID);
/*Removing the Attribute using the dataset*/
ourDiv.dataset.adeveloperFisrtPost = NULL;
}

کلام آخر
متاسفانه در حال حاضر اکثر مرورگر ها از dataset پشتیبانی نمی کنن که می شه بجاش از توابع setAttribute و getAttribute و removeAttribute استفاده کرد.


و همینطور نکته ای که موند، اینه که منظور از خاصیت دلخواه، همون Custom Attributes هستش :-)

این لینک در مورد ساپورت مروگرها در مورد dataset و خاصیت های دلخواه، در مورد ساپورت مرورگرها: +


سورس فایل دمو: +

منبع: +

پست‌های معروف از این وبلاگ

آپدیت نشدن View و ثابت ماندن مقدار فیلد Input در Angular

رویدادها در MySQL

لیست شهر و استان‌های ایران