ویژگی className HTML DOM Element

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

className تنظیم یا بازگشت ویژگی class عناصر.

لطفاً به:

ویژگی classList عناصر

مетод getElementsByClassName() مستند Document

صورت Style HTML DOM

مثال‌ها

مثال 1

تنظیم ویژگی class عناصر:

element.className = "myStyle";

به طور مستقیم امتحان کنید

مثال 2

دسترسی به ویژگی class "myDIV":

let value = document.getElementById("myDIV").className;

به طور مستقیم امتحان کنید

مثال 3

تعویض بین دو نام کلاس:

if (element.className == "myStyle") {
  element.className = "newStyle";
} else {
  element.className = "myStyle";
}

به طور مستقیم امتحان کنید

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

نحوه استفاده

بازگشت ویژگی className:

HTMLElementObject.className

تنظیم ویژگی className:

HTMLElementObject.className = class

مقدار ویژگی

مقدار توضیح
class

نام کلاس عنصر.

با استفاده از فضای خالی چندین کلاس را جدا کنید، به عنوان مثال "test demo".

مقدار بازگشتی

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

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

مثال 4

ویژگی class اولین عنصر <div> را بدست آورید (اگر وجود داشته باشد):

let value = document.getElementsByTagName("div")[0].className;

به طور مستقیم امتحان کنید

مثال 5

ویژگی class با چندین نوع را بدست آورید:

<div id="myDIV" class="myStyle test example">
<p>I am myDIV.</p>
</div>
let value = document.getElementById("myDIV").className;

به طور مستقیم امتحان کنید

مثال 6

با استفاده از ویژگی class جدید، ویژگی class فعلی را تغییر می‌دهد:

element.className = "newClassName";

به طور مستقیم امتحان کنید

مثال 7

برای اضافه کردن یک نوع جدید بدون تغییر ارزش فعلی، فضای خالی و نوع جدید را اضافه کنید:

element.className += " class1 class2";

به طور مستقیم امتحان کنید

مثال 8

اگر "myDIV" دارای نوع "myStyle" باشد، اندازه فونت را تغییر می‌دهد:

const elem = document.getElementById("myDIV");
if (elem.className == "mystyle") {
  elem.style.fontSize = "30px";
}

به طور مستقیم امتحان کنید

مثال 9

اگر شما از بالا به پایین 50 پیکسل روی صفحه اسکرول کنید، "test" را اضافه خواهد کرد:

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}

به طور مستقیم امتحان کنید

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

همه مرورگرها از آن حمایت می‌کنند element.className:

کروم آی‌ای ایج افراط سفاری آپرا
کروم آی‌ای ایج افراط سفاری آپرا
پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی پشتیبانی

صفحات مرتبط

آموزش CSS:structures CSS

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