تک دیک

واژه نامه و مجله آموزشی کامپیوتر و فناوری

کلاس ها و خصوصیت class در HTML
اچ‌تی‌ام‌ال 

کلاس ها و خصوصیت class در HTML

به روز شده در امیرحسین شهسواری 0 دیدگاه ،،،،،

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

نحوه تخصیص کلاس (Class) به المان ها در اچ‌تی‌ام‌ال و جزئیات آن

برای تخصیص کلاس به یک المان کافیست مشابه با مثال زیر، برای خصوصیت class در تگ شروع المان، مقداری را به عنوان نام کلاس درج کنید. در این مثال به یک المان <p> (یا پاراگراف)، کلاسی با نام myclass اختصاص داده شده است.

<p class="myclass">This is a simple paragraph.</p>

در HTML می‌توان برای چند المان مختلف از یک کلاس ثابت استفاده کرد. (درست برخلاف خصوصیت id در اچ‌تی‌ام‌ال که هر المان داخل صفحه می‌بایست مقدار منحصربفردی برای این خصوصیت داشته باشد). علاوه بر این می‌توان به هر المان، چند کلاس مختلف نیز تخصیص داد. برای اختصاص چند کلاس به یک المان می‌توانید نام کلاس ها را با یک فاصله از هم جدا کنید. در مثال زیر دو کلاس با نام های myclass1 و myclass2 به پاراگراف اول اختصاص داده شده است. در عین حال پاراگراف دوم نیز دارای کلاس myclass1 می‌باشد.

<p class="myclass1 myclass2">This is a paragraph.</p>
<p class="myclass1">This is another paragraph.</p>

نکته 1: فراموش نکنید نام کلاس در HTML به بزرگی و کوچکی حروف حساس است. بنابراین myclass و myClass دو نام کلاس متفاوت محسوب می‌شوند.

نکته 2: از این خصوصیت می‌توان برای تخصیص کلاس به هر نوع المان HTML استفاده کرد.

کاربردهای کلاس و خصوصیت class در HTML

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

تعیین استایل در CSS براساس کلاس

در CSS برای انتخاب المان هایی با یک کلاس مشخص و تعیین استایل برای آن‌ها می‌توان از گزینشگرها یا سلکتورهای کلاس کمک گرفت و تمام المان هایی که دارای یک کلاس مشخص هستند را انتخاب و هدف تعیین استایل قرار داد.

مثال زیر نمونه‌ای از کاربرد کلاس‌ها برای تعیین استایل را نمایش می‌دهد. در این مثال یک المان <p> و یک المان <span> دارای کلاس redtext هستند. در بخش <style> با کمک سلکتور .redtext این دو المان برای تعیین استایل انتخاب می‌شوند و رنگ آن‌ها روی قرمز تنظیم می‌شود.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .redtext {
        color: red;
      }
    </style>
  </head>
  <body>
    <p class="redtext">This is the first paragraph.</p>
    <p>This is the <span class="redtext">second</span> paragraph.</p>
  </body>
</html>

نتیجه کد فوق معمولا مشابه با نمونه زیر توسط مرورگر رندر می‌شود.

نتیجه اعمال استایل و تعیین رنگ قرمز روی دو المان با کلاس یکسان

دسترسی به یک المان در جاوااسکریپت براساس کلاس

در جاوااسکریپت می‌توانید با کمک متد getElementsByClassName() به المان هایی با یک کلاس مشخص دسترسی پیدا کنید. در مثال زیر با کمک کد جاوااسکریپت موجود در بخش <script>، رنگ متن تمام المان های دارای کلاس redtext روی قرمز تنظیم می‌شود.

<!DOCTYPE html>
<html>
  <body>
    <p class="redtext">This is the first paragraph.</p>
    <p>This is the <span class="redtext">second</span> paragraph.</p>

    <script>
      var x = document.getElementsByClassName("redtext");
      for (var i = 0; i < x.length; i++) {
        x[i].style.color = "red";
      }
    </script>

  </body>
</html>

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

امیرحسین شهسواری

عاشق دنیای رایانه و فناوری به خصوص برنامه نویسی هستم؛ یادگرفتن و البته یاد دادن چیزای جالبی که یاد گرفتم باعث خوشحالیم میشه و از اولویت‌های اصلی زندگیم به حساب میاد. از مدیریت و نوشتن در تک دیک هم واقعا لذت می‌برم :)

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *