این آموزش در تاریخ ۱۴۰۲/۰۶/۱۹ آپدیت شده است.
آموزش صفت عمومی ID در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش صفت عمومی ID در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
صفت عمومی id در HTML
صفت id صفتی است که ما با استفاده از آن میتوانیم یک آی دی یا یک شناسه منحصر بفرد را برای یک عنصر در یک صفحه وب مشخص نماییم و نکته ای که باید بهش توجه کنیم این است که اون ID باید در یک صفحه وب کاملا منحصر بفرد باشد.
از این صفت هم میشه در زبان CSS و هم در زبان JavaScript استفاده کرد ولی خب بیشترین استفاده این صفت در زبان جاوااسکریپت می باشد، و در زبان جاوااسکریپت هست که میگم نباید ID دوتا تگ شبیه هم باشند، وگرنه در زبان CSS این جریان اصلا مهم نیست.
برای مثال من اومدم و با استفاده از صفت id یک شناسه منحصر بفرد برای یک عنصر تعریف کردم و سپس با استفاده از جاوااسکریپت میخوام محتویات این عنصر را تغییر بدهم.
روی دکمه پایین کلیک کن
Free-Learn
مثال از صفت id در HTML
در ادامه میتوانید یک مثال از این صفت را مشاهده نمایید.
مثال شماره ۱ : استفاده در زبان جاوااسکریپت
|
1 2 3 4 5 6 7 |
<script> function Result(){ document.getElementById("test").innerHTML = "وای! من تغییر کردم"; } </script> |
مثال شماره ۲ : استفاده در زبان CSS
|
1 2 3 4 5 6 7 8 9 |
<style> #free-learn{ background-color:#F44336; color:#fff; padding:10px; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از صفت id در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
روش استفاده
روش استفاده از این صفت در عناصر HTML بصورت زیر می باشد.
|
1 |
<element id="ID_Name"> |
Free-Learn
جدول مقادیر صفت id
در جدول زیر میتوانید مقادیر را که میتوان در این صفت استفاده کرد را مشاهده نمایید.
| مقدار | توضیح |
| ID_Name | تعریف یک شناسه یا آی دی منحصر بفرد برای تگ |
قوانین نامگذاری یک id برای عناصر در HTML :
- نام یک id باید حداقل دارای یک کاراکتر باشد.
- در بین حروف نام یک id نباید هیچ فاصله ای وجود داشته باشد.
سوال : شاید این براتون سواله که اصلا این صفت به چه درد میخوره و یا اصلا تفاوت ID با Class در چیه؟ و اینکه اصلا چرا ما باید از کلاس و یا آی دی استفاده نماییم؟
پاسخ :اول اینکه این صفت همونطور که گفتم میتونه یک شناسه یا آی دی منحصر بفردی رو برای یک عنصر یا تگ در یک صفحه ی وب مشخص کند خب میتونیم از این شناسه در جاوااسکریپت یا CSS استفاده نماییم.
ادامه پاسخ » وقتی میگیم منحصر بفرد، یعنی مثلا من میخوام با استفاده از جاوااسکریپت وقتی بروی یک دکمه کلیک شد متن درون یک تگ تغییر کند، حال اگه چندین تگ از یک ID یکسان استفاده کرده باشند ، دیگه عملیات تغییر متن بروی همه ی تگ ها اعمال نخواهد شد چون چندین تگ از ID یکسان استفاده کرده اند، پس اینجاست که میگیم باید منحصربفرد باشه.
Free-Learn
نکات و توضیحات
خب دوستان محترم در ادامه آموزش صفت عمومی ID در HTML میخوام شمارو با تفاوت های اصلی ID با Class آشنا کنم، لطفا با من همراه باشید :
- در یک صفحه یک تگ فقط میتونه ۱ ( یک عدد ) آی دی یا ID داشته باشد. (مثال)
- در یک صفحه یک تگ میتونه چندین ( بیش از ۲ ) کلاس داشته باشد. (مثال)
- از ID ها نیز در CSS میشه استفاده کرد، یعنی میشه از یک ID درون چندین تگ استفاده کرد سپس با استفاده از CSS به اون تگ ها استایل داد. ( مثال )
- بیشترین استفاده از ID ها در جاوااسکریپت می باشد، و اگه شما در جاوااسکریپت از یک ID درون چندین تگ استفاده کرده باشید، عملیات فقط بروی اولین تگ اعمال میشه و بروی بقیه هیچ تاثیری ندارد. ( مثال )
- معمولا به مواردی که در یک صفحه ی وب خاص هستند ID میدن، مثلا چیزی که ازش نهایتا یه دونه در صفحه قرار داره.
- یک تگ بصورت همزمان هم میتونه Class و هم میتونه ID داشته باشد. (مثال)
- نام یک ID نباید با عدد شروع شود.
- نام یک Class نباید با عدد شروع شود.
- نام یک ID باید حداقل حاوی یک کاراکتر باشد.
- نباید هیچ فاصله ای در بین کاراکترهای نام یک ID قرار داشته باشد.
- نباید هیچ فاصله ای قبل و بعد از نام ID وجود داشته باشد.
- در HTML نام ID ها به حروف بزرگ و کوچک حساس می باشند.
