| قدم قبلی > | < قدم بعدی |
در این آموزش html به معرفی خصوصیت آی دی(id)در html می پردازیم.
استفاده از خصوصیت آی دی (id) در html
شناسه id یک شناسه منحصر به فرد برای یک عنصر HTML را مشخص می کند (ارزش باید در سند HTML منحصر به فرد باشد).
ارزش id می تواند توسط CSS و جاوا اسکریپت برای انجام وظایف خاص برای یک عنصر منحصر به فرد با مقدار شناسه مشخص شده استفاده شود.
در CSS، برای انتخاب یک عنصر با شناسه خاص، یک شخصیت هش (#) را بنویسید و بعد از شناسه عنصر:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ | <style> #myHeader { background-color: lightblue; color: black; padding: ۴۰px; text-align: center; } </style> <h1 id="myHeader">My Header</h1> |
نکته: ویژگی id می تواند در هر عنصر HTML مورد استفاده قرار گیرد.
توجه: مقدار شناسه حساس به حروف است.
نکته: ارزش شناسه باید حداقل یک کاراکتر داشته باشد و نباید فضای خالی (spaces، tabs، etc.) را داشته باشد.
تفاوت بین کلاس(class) و شناسه(id)
یک عنصر HTML می تواند تنها یک شناسه منحصر به فرد که متعلق به آن عنصر تک است، در حالی که یک نام کلاس می تواند توسط چندین عنصر استفاده شود:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ | <style> /* Style the element with the id "myHeader" */ #myHeader { background-color: lightblue; color: black; padding: ۴۰px; text-align: center; } /* Style all elements with the class name "city" */ .city { background-color: tomato; color: white; padding: ۱۰px; } </style> <!-- A unique element --> <h1 id="myHeader">My Cities</h1> <!-- Multiple similar elements --> <h2 class="city">London</h2> <p>London is the capital of England.</p> <h2 class="city">Paris</h2> <p>Paris is the capital of France.</p> <h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p> |
Bookmarks با آی دی و لینکها
بوک مارک های HTML برای اجازه دادن به خوانندگان به پرش به قسمت های خاص یک صفحه وب استفاده می شود.
نشانکها میتوانند مفید باشند اگر صفحه وب شما بسیار طولانی باشد
برای ایجاد یک نشانه، ابتدا باید ابتدا چوب را ایجاد کنید و سپس یک پیوند به آن اضافه کنید.
هنگامی که لینک کلیک شده است، صفحه به مکان با نشانه بروید.
مثال:
اول، ایجاد یک نشانه با ویژگی id:
۱ | <h2 id="C4">Chapter ۴</h2> |
سپس، یک پیوند را به نشانه اضافه کنید (“پرش به فصل ۴”)، از داخل همان صفحه:
۱ | <a href="#C4">Jump to Chapter ۴</a> |
یا، یک پیوند به نشانه (“پرش به فصل ۴”)، از یک صفحه دیگر اضافه کنید:
۱ | <a href="html_demo.html#C4">Jump to Chapter ۴</a> |
استفاده از خصوصیت آی دی در جاوا اسکریپت
۱ ۲ ۳ ۴ ۵ | <script> function displayResult() { document.getElementById("myHeader").innerHTML = "Have a nice day!"; } </script> |
| گام قبلی > | < گام بعدی |
هنوز دیدگاهی برای این مطلب ثبت نشده است.