الخلاصة
تقوم className بجلب أو ضبط قيمة سمة class الخاصة بالعنصر.
بنية الجملة
var cName = elementNodeReference.className; elementNodeReference.className = cName;
- إن cName هو متغير نصي يعبر عن اسم class العنصر أو أكثر من class واحد يفصل بينها مسافات للعنصر الحالي.
مثال
let elm = document.getElementById('item');
if(elm.className === 'active'){
elm.className = 'inactive';
} else {
elm.className = 'active';
}
ملاحظات
تم استخدام className عوضًا عن class فقط لكي لا يتم خلطها مع كلمة class التي تستخدم في البرمجة الكائنية
يمكن استخدام className في حالة SVGAnimatedString إذا كان العنصر عبارة عن SVGElement، من الأفضل أن تجلب قيمة className أو تضبطها باستخدام Element.getAttribute وElement.setAttribute إذا كنت تتعامل مع عنصر من نوع SVG.
elm.setAttribute('class', elm.getAttribute('class'))
الخواص
| الخاصية | الحالة | تعليق |
|---|---|---|
| DOM The definition of 'element.className' in that specification. |
Living Standard | |
| DOM4 The definition of 'element.className' in that specification. |
Obsolete | |
| Document Object Model (DOM) Level 2 HTML Specification The definition of 'element.className' in that specification. |
Obsolete | Initial definition |
التوافق مع المتصفحات
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |
| Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Basic support | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) | (Yes) |