خصوصیت 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 教程：CSS گرامر

CSS 参考手册：CSS .class چنسر