blob: cd37ae178e5bd1ceae591f589b394bb35f12ec72 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
|
---
title: Element.className سمة العنصر
slug: Web/API/Element/className
tags:
- API
- DOM
- Gecko
- Property
- Reference
- خاصية
- مرجع
translation_of: Web/API/Element/className
---
<div>{{APIRef("DOM")}}</div>
<h2 id="الخلاصة">الخلاصة</h2>
<p>تقوم <strong>className</strong> بجلب أو ضبط قيمة سمة class الخاصة بالعنصر.</p>
<h2 id="بنية_الجملة">بنية الجملة</h2>
<pre class="syntaxbox"><var>var cName</var> = <var>elementNodeReference</var>.className;
<var>elementNodeReference</var>.className = <var>cName</var>;
</pre>
<ul>
<li>إن <em>cName</em> هو متغير نصي يعبر عن اسم class العنصر أو أكثر من class واحد يفصل بينها مسافات للعنصر الحالي.</li>
</ul>
<h2 id="مثال">مثال</h2>
<pre class="brush: js">let elm = document.getElementById('item');
if(elm.className === 'active'){
elm.className = 'inactive';
} else {
elm.className = 'active';
}</pre>
<h2 id="Notes" name="Notes">ملاحظات</h2>
<p>تم استخدام <code>className</code> عوضًا عن <code>class</code> فقط لكي لا يتم خلطها مع كلمة class التي تستخدم في البرمجة الكائنية</p>
<p>يمكن استخدام <code>className</code> في حالة {{domxref("SVGAnimatedString")}} إذا كان العنصر عبارة عن {{domxref("SVGElement")}}، من الأفضل أن تجلب قيمة <code>className</code> أو تضبطها باستخدام {{domxref("Element.getAttribute")}} و{{domxref("Element.setAttribute")}} إذا كنت تتعامل مع عنصر من نوع SVG.</p>
<pre class="brush: js">elm.setAttribute('class', elm.getAttribute('class'))</pre>
<p> </p>
<h2 id="الخواص">الخواص</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">الخاصية</th>
<th scope="col">الحالة</th>
<th scope="col">تعليق</th>
</tr>
<tr>
<td>{{SpecName("DOM WHATWG", "#dom-element-classname", "element.className")}}</td>
<td>{{Spec2("DOM WHATWG")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("DOM4", "#dom-element-classname", "element.className")}}</td>
<td>{{Spec2("DOM4")}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName("DOM2 HTML", "html.html#ID-95362176", "element.className")}}</td>
<td>{{Spec2("DOM2 HTML")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="التوافق_مع_المتصفحات">التوافق مع المتصفحات</h2>
<p>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="اقرأ_ايضًا">اقرأ ايضًا</h2>
<ul>
<li>{{domxref("element.classList")}}</li>
</ul>
|
