استفاده از صفت id در HTML بصورت جامع
ویژگی id در HTML
صفت id ، همانند صفت class یک نام را برای شناسایی و دستیابی به هر کدام از عنصر html. در کدهای css و جاوااسکریپت مشخص می کند. مقدار هر id برای هر کدام از عناصر html باید یکتا و منحصر به فرد باشد.
نکته ای که در اینجا حائز اهمیت است مقدار id حتما باید منحصر به فرد بوده و در سایر عناصر تکرار نشود.
از این صفت هم در زبان CSS و هم در زبان JavaScript استفاده میشود ولی بیشترین استفاده این صفت در زبان جاوااسکریپت می باشد و این نکته که نباید id دو تگ شبیه هم باشند در جاوااسکریپت صدق می کند و در زبان css این نکته اهمیتی ندارد.
مثال از صفت id در HTML
مثال شماره ۱ : استفاده در زبان جاوااسکریپت
<!DOCTYPE html>
<html>
<body>
<button onclick="Result()">کلیک کن</button>
<h2 id="test">سلام خوبی؟</h2>
<script>
function Result(){
document.getElementById("test").innerHTML = "وای! من تغییر کردم";
}
</script>
</body>
</html>
نتیجه:
سلام خوبی؟
مثال شماره ۲ : استفاده در زبان CSS
<!DOCTYPE html>
<html>
<head>
<style>
#free-learn{
background-color:#F44336;
color:#fff;
padding:10px;
}
</style>
</head>
<body>
<p id="آپ وب">www.upweb.ir</p>
</body>
</html>
تفاوت بین class و id در HTML
تفاوت عمده بین id و class ، این است که مقدار id ، در هر عنصر html باید یکتا باشد و تکرار نشود ، اما یک نام class می تواند در چندین عنصر تکرار شود.
<!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple elements with same class -->
<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>
</body>
</html>
نتیجه:
My Cities
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
bookmark با استفاده از id و link
bookmark ها اغلب برای ایجاد قابلیت پرش از قسمتی از صفحه وب به قسمتی دیگر برای خوانندگان صفحات وب ایجاد می شوند.
Bookmark ها معمولا در صفحات وب طولانی و بلند کاربرد دارند.
در ابتدا باید Bookmark را ایجاد کرده و سپس یک لینک به آن بدهید سپس وقتی که کاربر روی آن کلیک کند، مرورگر به جایی که Bookmark ایجاد شده اسکرول می شود.
مثال:ابتدا یک bookmark با ویژگی id ایجاد کنید:
<h2 id="C4">Chapter 4</h2>
سپس، یک link به نشانک(bookmark) («Jump to Chapter 4»)، از همان صفحه اضافه کنید:
<a href="#C4">Jump to Chapter 4</a>
یا پیوندی به نشانک ("Jump to Chapter 4")، از صفحه دیگری اضافه کنید:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
مثال کامل:
<!DOCTYPE html> <html> <body> <p><a href="#C4">Jump to Chapter 4</a></p> <p><a href="#C10">Jump to Chapter 10</a></p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <h2 id="C4">Chapter 4</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 8</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 9</h2> <p>This chapter explains ba bla bla</p> <h2 id="C10">Chapter 10</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 11</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 12</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 13</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 14</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 15</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 16</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 17</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 18</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 19</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 20</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 21</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 22</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 23</h2> <p>This chapter explains ba bla bla</p> </body> </html>
نتیجه:
Chapter 1
This chapter explains ba bla bla
Chapter 2
This chapter explains ba bla bla
Chapter 3
This chapter explains ba bla bla
Chapter 4
This chapter explains ba bla bla
Chapter 5
This chapter explains ba bla bla
Chapter 6
This chapter explains ba bla bla
Chapter 7
This chapter explains ba bla bla
Chapter 8
This chapter explains ba bla bla
Chapter 9
This chapter explains ba bla bla
Chapter 10
This chapter explains ba bla bla
Chapter 11
This chapter explains ba bla bla
Chapter 12
This chapter explains ba bla bla
Chapter 13
This chapter explains ba bla bla
Chapter 14
This chapter explains ba bla bla
Chapter 15
This chapter explains ba bla bla
Chapter 16
This chapter explains ba bla bla
Chapter 17
This chapter explains ba bla bla
Chapter 18
This chapter explains ba bla bla
Chapter 19
This chapter explains ba bla bla
Chapter 20
This chapter explains ba bla bla
Chapter 21
This chapter explains ba bla bla
Chapter 22
This chapter explains ba bla bla
Chapter 23
This chapter explains ba bla bla
استفاده از ویژگی id در جاوااسکریپت
ویژگی id همچنین می تواند توسط جاوا اسکریپت برای انجام برخی کارها برای آن عنصر خاص استفاده شود.
جاوا اسکریپت می تواند با استفاده از صفت id ، و تابع ()getElementById ، به یک عنصر html دسترسی پیدا کند.
مثال: استفاده از جاوااسکریپت برای تغییر دادن محتوای عناصر
<!DOCTYPE html>
<html>
<body>
<h2>Using The id Attribute in JavaScript</h2>
<p>JavaScript can access an element with a specified id by using the getElementById() method:</p>
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">Change text</button>
<script>
function displayResult() {
document.getElementById("myHeader").innerHTML = "Have a nice day!";
}
</script>
</body>
</html>