خاصية className للعنصر DOM HTML

التعريف والاستخدام

className إعداد أو إرجاع خاصية class للعنصر.

يرجى الرجوع إلى:

خاصية classList للعنصر

طريقة getElementsByClassName() للوثيقة

مثل HTML DOM Style

مثال

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