• صفحه اصلی
  • هاست حرفه ای
    • هاست مخصوص وردپرس
    • هاست سی پنل آلمان
    • هاست سی پنل ایران
    • هاست نمایندگی
    • هاست دانلود
    • هاست ربات تلگرام
    • هاست آزمایشی
  • سرور مجازی
    • سرور مجازی پر سرعت SSD
    • سرور مجازی با هارد HDD
  • قالب وردپرس vip رایگان
    • فروشگاهی
    • همه منظوره
    • شرکتی
    • مشاهده همه موضوعات
  • گواهی SSL
  • دامنه
    • جستجو و ثبت دامنه
    • هزینه ثبت دامنه ها
  • پشتیبانی
    • ارسال درخواست پشتیبانی
    • ارتباط با ما / درباره ما
    • آموزش هاستینگ
    • آموزش HTML
    • قوانین
    • کسب درآمد در آپ وب
ورود به سایت
✕

استفاده از صفت id در HTML بصورت جامع

اموزش 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>
قوانین نامگذاری یک id برای عناصر در HTML : نام یک id باید حداقل دارای یک کاراکتر باشد. در بین حروف نام یک id نباید هیچ فاصله ای وجود داشته باشد.

تفاوت بین 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>

نتیجه:

Jump to Chapter 4

Jump to Chapter 10

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>
از وقتی که

مطالب مرتبط

اموزش html
3 خرداد 1401

آموزش طرح بندی و تکنیک های چیدمان عناصر HTML


ادامه مطلب
اموزش html
28 اردیبهشت 1401

آموزش استفاده از تگ Head در HTML بصورت جامع


ادامه مطلب
اموزش html
14 اردیبهشت 1401

آموزش آدرس دهی به فایل ها در HTML بصورت جامع


ادامه مطلب

آپ وب خانه امن رویاهای آنلاین شما


خرید هاست و ثبت دامنه پیش نیاز برای ایجاد سایت میباشد. سرعت بارگزاری هاست و اپتایم نقش مهمی در سئو سایت دارد. آپ وب تلاش میکند بهترین کیفیت هاست را برای شما ایجاد کند.

آپ وب با بیش از 8 سال سابقه در کنار شماست.

نماد اعتماد الکترونیکی

نماد اعتماد

خرید هاست


ارسال تیکت

ارتباط با ما


شماره تماس: 33854475-013
info@upweb.ir

نیاز به پشتیبانی دارید؟

اگر سوالی دارید از طریق تیکت به پشتیبان مطرح نمایید.


ارتباط با ما
© 2022 تمام حقوق برای شرکت هاستینگ آپ وب محفوظ می باشد.
ورود به سایت