ویژگی class HTML

تعریف و استفاده

کلاس ویژگی مشخص می‌کند که نام کلاس (classname) عناصر چیست.

کلاس ویژگی اصلی به منظور اشاره به کلاس‌های استایل‌ها استفاده می‌شود. اما، می‌توان از آن برای تغییر عناصر HTML با کلاس مشخص شده توسط JavaScript (HTML DOM) استفاده کرد.

لطفاً به: مراجعه کنید.

آموزش HTML:ویژگی‌های HTML

آموزش CSS:قوانین CSS

دستورالعمل‌های CSS:انتخاب‌گر <class> CSS

دستورالعمل‌های HTML DOM:مетод getElementsByClassName() HTML DOM

دستورالعمل‌های HTML DOM:ویژگی className HTML DOM

دستورالعمل‌های HTML DOM:ویژگی classList HTML DOM

دستورالعمل‌های HTML DOM:عنصر Style DOM HTML

مثال

مثال 1

از属性 class در مستندات HTML استفاده کنید:

<html>
<head>
<style>
h1.intro {
  color: blue;
}
p.important {
  color: green;
}
</style>
</head>
<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">لطفاً توجه کنید، این یک پاراگراف مهم است。:)</p>
</body>
</html>

آزمایش کنید

مثال‌های بیشتری در پایین صفحه ارائه شده است.

نحوه استفاده

<element class="classname">

مقدار属性

مقدار توضیح
classname

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

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

این اجازه می‌دهد تا چندین کلاس CSS را به یک عنصر HTML ترکیب کنید.

مثلاً：<span class="left important">

قوانین نام‌گذاری:

  • باید با حرف A-Z یا a-z شروع شوند
  • می‌توانند شامل: حروف (A-Za-z)، اعداد (0-9)، خط تیره ("-") و زیرخط ("_") باشند

مثال‌های بیشتر

مثال 2

کلاس‌های چندگانه را به یک عنصر HTML اضافه کنید:

<!DOCTYPE html>
<html>
<head>
<style>
h1.intro {
  color: blue;
  text-align: center;
}
.important {
  background-color: yellow;
}
</style>
</head>
<body>
<h1 class="intro important">عنوان 1</h1>
<p>یک پاراگراف.</p>
</body>
</html>

آزمایش کنید

مثال 3

با استفاده از JavaScript رنگ پس‌زمینه زرد را به اولین عنصر با class="example" (INDEX 0) اضافه کنید.

let x = document.getElementsByClassName("example");
x[0].style.backgroundColor = "yellow";

آزمایش کنید

مثال 4

با استفاده از JavaScript، دستور "mystyle" را به عنصر با شناسه "myDIV" اضافه کنید:

document.getElementById("myDIV").classList.add("mystyle");

آزمایش کنید

پشتیبانی از مرورگر

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی