با عرض سلام خدمت کاربران سایت پی وی لرن . در آموزشهایی که در مطالب قبلی در مورد html ، ارائه گردید. توضیحات مفصلی در مورد استفاده از صفت class در html ، ارائه شد. در این بخش از آموزش نیز قصد داریم. به موضوع آموزش استفاده از صفت id در html یا ویژگی id در html و کاربرد id در html ، بپردازیم. صفت id ، در واقع یک مقدار منحصر به فرد را برای یک عنصر html را تعریف می کند.
صفت id ، همانند صفت class یک نام را برای شناسایی و دستیابی به هر کدام از عنصر html. در کدهای css و جاوااسکریپت مشخص می کند. مقدار هر id برای هر کدام از عناصر html باید یکتا و منحصر به فرد باشد.
در ادامه به موضوع چگونگی استفاده از صفت id در html ، می پردازیم.
همانطور که اشاره شد. صفت id ، همانند class برای دستیابی به ویژگی های یک عنصر ، در کدهای css و جاوااسکریپت ، مورد استفاده قرار می گیرد. اما مقدار id حتما باید منحصر به فرد بوده و در سایر عناصر تکرار نشود.
مثال: استفاده از کدهای css برای تغییر دادن محتویات عناصری با id با مقدار “myHeader” :
1 2 3 4 5 6 7 8 9 10 | <style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } </style> <h1 id="myHeader">My Header</h1> |
نتیجه ی کد فوق :
تفاوت عمده بین id و class ، این است. که مقدار id ، در هر عنصر html باید یکتا باشد. و تکرار نشود ، اما یک نام class می تواند در چندین عنصر تکرار شود.
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <style> /* Style the element with the id "myHeader" */ #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } /* Style all elements with the class name "city" */ .city { background-color: tomato; color: white; padding: 10px; } </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> |
bookmark ها اغلب برای ایجاد قابلیت پرش از قسمتی از صفحه وب به قسمتی دیگر برای خوانندگان صفحات وب ایجاد می شوند.
Bookmark ها معمولا در صفحات وب طولانی و بلند کاربرد دارند.
در ابتدا باید Bookmark را ایجاد کرده و سپس یک لینک به آن بدهید.
سپس وقتی که کاربر روی آن کلیک کند، مرورگر به جایی که Bookmark ایجاد شده اسکرول می شود.
مثال :
ابتدا یک صفت id به عنصر مربوطه برای ایجاد Bookmark اضافه کنید :
1 | <h2 id="C4">Chapter 4</h2> |
حالا یک لینک به bookmark در همان صفحه وب ایجاد کنید:
1 | <a href="#C4">Jump to Chapter 4</a> |
و یا اینکه از صفحات دیگر یک لینک به bookmark آن صفحه بدهید :
جاوا اسکریپت می تواند. با استفاده از صفت id ، و تابع ()getElementById ، به یک عنصر html دسترسی پیدا کند.
مثال: استفاده از جاوااسکریپت برای تغییر دادن محتوای عناصر:
1 2 3 4 5 | <script> function displayResult() { document.getElementById("myHeader").innerHTML = "Have a nice day!"; } </script> |
در مبحث قبلی چگونگی استفاده از صفت class برای انتخاب گروهی از عناصر html را در زبان های css و جاوا اسکریپت و … را توضیح دادیم، اما برای انتخاب یک عنصر منحصر به فرد باید از صفت id در html به گونه ای که در مباحث فوق نیز اشاره شده استفاده کنید.
asra
سلام
از id هم میشه میشه عنصر class در چند عنصر استفاده کرد.ب نظر من تفاوت شون در خاصیت bookmark هست که از id میشه استفاده کرد ولی class این خاصیت رو نداره.
صادق
سلام.
شاید بشه در نسخه های قدیمی تر HTML یک id رو به چند عنصر تخصیص داد اما توی HTML5 خبری از این ویژگی نیست و id ها حتما باید یونیک یا همون منحصر به فرد باشن.