آموزش HTML – فصل چهاردهم: کلاس ها (Classes)

استفاده از خاصیت Class در زبان HTML

خاصیت class اچ تی ام ال برای تعریف style های مساوی برای المان هایی با یک اسم class مشابه استفاده میشود.

پس تمامی المان های اچ تی ام ال با نام کلاس مشابه، می توانند یک استاید داشته باشند.

اینجا ما سه المان <div> داریم که به یک اسم کلاس (cities) اشاره میکنند:

استفاده از خاصیت کلاس class بر روی المان های inline

خاصیت کلاس اچ تی ام ال را همچنین میتوان بر روی المان های inline استفاده کرد.

مثال:

نکته : خاصیت کلاس را میتوان بر روی همه المان اچ تی ام ال اعمال کرد.

نکته: اسم کلاس case sensitive است یعنی اگر آن را با حروف کوچک نوشتید فقط با حروف کوچک می توانید از آن در CSS و جاوا اسکریپت استفاده کنید.

انتخاب المان های با یک کلاس مخصوص در CSS

در سی اس اس برای انتخاب المان هایی دارای یک کلاس مخصوص، یک کاراکتر نقطه (.) قبل از نام آن بنویسید.

مثال استفاده از سی اس اس برای استایل دادن به تمام المان ها با نام کلاس “city”:

المان هایی با چندین کلاس در زبان HTML

المان های اچ تی ام ال میتوانند بیش از یک نام کلاس داشته باشند. هر نام کلاس باید با یک فاصله یا همان space جدا شود.

مثال استفاده از چند نام کلاس برای یک المان در HTML، یکی از المان ها دو کلاس “city” و “main” دارد:

در مثال بالا اولین المان <h2> به هردو کلاس های city و main تعلق دارد.

تگ های متفاوت نیز میتوانند از یک کلاس همانند استفاده کنند

به عنوان مثال، تگ های متفاوت پ<h2> و <p> میتوانند یک اسم کلاس همانند داشته باشند و از یک استایل در CSS برخوردار باشند.

مثال:

استفاده کردن از خاصیت کلاس در جاوا اسکریپت

نام کلاس میتواند در جاوا اسکریپت استفاده شود تا کارهای مشخصی بر روی المان هایی با نام کلاس مشخص اعمال شود.

جاوا اسکریپت میتواند با متود getElementsByClassName() به المان های با نام کلاس مشخص شده دسترسی پیدا کند.

در مثال جاوا اسکریپت زیر وقتی یک کاربر بر روی دکمه کلیک می کند، تمام المان های با نام کلاس “city” مخفی می شوند:

function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}

نکته: درباره جاوا اسکریپت بیشتر در فصل جاوا اسکریپت در اچ تی ام ال و یا آموزش جاوا اسکریپت ما بخوانید.

در ادامه آموزش گام به گام زبان HTML، مطلب آموزش HTML – فصل پانزدهم: آی دی (Id) را مطالعه کنید.