ایچ تی ایم ایل کلاس اپریشن

تعلیم اور استعمال

کلاس عناصر کی کلاس نام (کلاس اینیم) کو مقرر کرتی ہے۔

کلاس عناصر کلاسی کا استعمال عام طور پر استایل شیپ کی کلاسوں کو نکالنا ہوتا ہے۔ لیکن، اس کوجسٹریجکسیٹ (جسٹریجکسیٹ) کے ذریعے کسی کلاس والے ایچ تی ایم ایل عنصر کو بھی تبدیل کرنے کے لئے استعمال کیا جاسکتا ہے۔

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

آموزش HTML:HTML خاصیت

آموزش CSS:CSS گرامر

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

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

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

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

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

مثال‌ها

مثال 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

نام‌گذاری عنصر به یک یا چندین کلاس.

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

این به شما اجازه می‌دهد تا چندین کلاس را به یک عنصر 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" (شاخص 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
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی