• پاسخگویی سوالات در خصوص خرید هاست و ثبت دامنه
  • 013-32625682
اپ وباپ وباپ وباپ وب
  • صفحه اصلی
  • هاست (میزبانی وب)
    • هاست سی پنل ایران
    • هاست سی پنل آلمان
    • هاست وردپرس اختصاصی
    • هاست پایتون و Node js
    • هاست ارزان و اقتصادی
    • هاست نمایندگی
    • هاست ویندوز
  • هاست ابری
  • سرور مجازی
    • سرور مجازی ایران
    • سرور مجازی آلمان
    • سرور مجازی فنلاند
  • قالب رایگان وردپرس
    • فروشگاهی
    • شرکتی
    • همه گروه ها
  • دامنه
    • جستجو و ثبت دامنه
    • خرید دامنه
    • گواهینامه 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>
از وقتی که

Related posts

اموزش html
28 آبان 1402

رمزگذاری در HTML-آموزش Charset در HTML به زبان ساده


Read more
اموزش html
26 مهر 1402

آموزش کار با نمادها (Symbols) در HTML


Read more
اموزش html
26 مهر 1402

آموزش موجودیت ها یا Entities در Html بصورت جامع


Read more
اموزش html
25 مهر 1402

عناصر معنایی یا Semantic Elements در HTML


Read more

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


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

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


مجوز وزارت صنعت و معدن

خرید هاست



ارسال تیکت

ارتباط با ما


شماره تماس: 32625682-013
[email protected]

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

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


ارتباط با ما

خرید هاست

هاست لینوکس

هاست سی پنل

هاست وردپرس

هاست اقتصادی

هاست نمایندگی

هاست ویندوز

سایر خدمات

ثبت دامنه ملی و بین المللی

سرور مجازی آلمان

سرور مجازی فنلاند

گواهینامه SSL

قالب آماده وردپرس رایگان

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