پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: بهاره حسنی 
آی دی و کلاس جزء پرکاربردترین انتخابگرها هستند ، صفاتی هستند که در html کاربرد زیادی دارند.
با دادن آیدی و کلاس به تگ ها میتوانیم در css به آن ها استایل دهیم کلاس ها را با (.) و آی دی را با (#) تعریف میکنیم.
id را فقط مختص یک تگ ولی class را میتوان برای تگ های دیگری نیز بکار ببریم.
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی پرنیان طرح
با آموزش صفات عمومی id و class همراه ما باشید.
صفت id در html :
آی دی ها زمانی استفاده می شوند که میخواهیم به یک عنصر استایل و ویژگی منحصر به فردی را اعمال کنیم.
آی دی ها یک شناسه منحصر به فرد را به یک عنصر اختصاص میدهند.
هر آی دی منحصر به فرد است و نمیتوان آن را به دو عنصر در یک صفحه وبسایت اختصاص داد.
برای استفاده از آی دی ها جلوی تگ id=” ” را مینویسیم و نامی به آن میدهیم.
شناسه ی انتخابگر ID کاراکتر # است که در بخش css کنار نام آی دی قرار میگیرد.
مثال زیر را ببینید:
[php]
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<h2>The id Attribute</h2>
<p>Use CSS to style an element with the id “myHeader”:</p>
<h1 id=”myHeader”>My Header</h1>
</body>
[/php]
لینک داخلی با صفت id :
با id ها میتوان لینک داخلی ایجاد کرد ، برای دسترسی راحت به بخش های دیگر صفحه از id استفاده میکنیم.
در مثال زیر توسط آی دی دادن به بخش مورد نظر میتوان به آن قسمت از صفحه لینک شد:
[php]
<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>
[/php]
کلاس ها در html :
کلاس ها را میتوانیم به چندین عنصر اختصاص دهیم و همانند آی دی ها منحصر به فرد نیستند.
برای استفاده از کلاس ها در html جلوی تگ صفت CLASS=”” بنویسید و نام کلاس را درآن قرار دهید سپس در css به آن ویژگی
استایل بدهید.
شناسه ی انتخابگر class کاراکتر (.) است که در بخش css کنار نام آن کلاس قرار میگیرد.
مثال زیر کلاسی است که از آن برای چند تگ استفاده کرده ایم:
[php]
<html>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<body>
<h2>Same Class, Different Tag</h2>
<p>Even if the two elements do not have the same tag name, they can have the same class name, and get the same styling:</p>
<h2 class=”city”>Paris</h2>
<p class=”city”>Paris is the capital of France.</p>
</body>
</html>
[/php]
تفاوت id ها و class ها :
-هر id در صفحه وب فقط منحصر به یک تگ یا گروه تگ است و نمیتوان آن id را در تگ های دیگر نیز بکار برد.
-کلاس را با علامت (.) و آی دی را با علامت (#) در css مشخص میکنیم.
-هر کلاس را میتوان برای چند تگ در همان صفحه بکار برد و کلاس ها منحصر بفرد نیستند.
استفاده از id ها در جاوا اسکریپت :
در جاوا اسکریپت برای دسترسی به یک المان از id ها استفاده میکنیم توسط متد getElementById() آیدی المان را فراخوانی میکنیم.
در مثال زیر استفاد از id در جاوا اسکریپت را ببینید:
[php]
<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>
[/php]
استفاده از class ها در جاوا اسکریپت :
در جاوا اسکریپت برای دسترسی به یک المان از class آن المان میتوانیم استفاده میکنیم توسط متد getElementsByClassName() کلاس
آن المان را فراخوانی میکنیم.
در مثال زیر استفاد از class در جاوا اسکریپت را ببینید:
[php]
<html>
<body>
<h2>Using The class Attribute in JavaScript</h2>
<p>Click the button, to hide all elements with the class name “city”, with JavaScript:</p>
<button onclick=”myFunction()”>Hide elements</button>
<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>
<script>
function myFunction() {
var x = document.getElementsByClassName(“city”);
for (var i = 0; i < x.length; i++) {
x[i].style.display = “none”;
}
}
</script>
</body>
</html>
[/php]
منبع : www.w3schools.com
