1 files changed, 137 insertions, 0 deletions
diff --git a/files/ar/web/api/element/classname/index.html b/files/ar/web/api/element/classname/index.html
new file mode 100644
index 0000000000..cd37ae178e
--- /dev/null
+++ b/files/ar/web/api/element/classname/index.html
@@ -0,0 +1,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>