أسلوب setAttribute () HTML DOM
❮ عنصر العنصرمثال
أضف سمة class بقيمة "democlass" إلى عنصر <h1>:
document.getElementsByTagName("H1")[0].setAttribute("class", "democlass");
قبل تعيين السمة:
Hello World
بعد تحديد السمة:
Hello World
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
يضيف الأسلوب setAttribute () السمة المحددة إلى عنصر ما ، ويعطيه القيمة المحددة.
إذا كانت السمة المحددة موجودة بالفعل ، فسيتم تعيين / تغيير القيمة فقط.
ملاحظة: على الرغم من أنه من الممكن إضافة سمة النمط بقيمة إلى عنصر باستخدام هذه الطريقة ، فمن المستحسن استخدام خصائص كائن النمط بدلاً من ذلك للتصميم المضمن ، لأن هذا لن يؤدي إلى استبدال خصائص CSS الأخرى التي قد تكون محددة في سمة النمط:
سيئة:
element.setAttribute("style", "background-color: red;");
حسن:
element.style.backgroundColor = "red";
نصيحة: استخدم طريقة removeAttribute () لإزالة سمة من عنصر.
نصيحة: راجع أيضًا طريقة setAttributeNode () .
دعم المتصفح
تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الطريقة بالكامل.
| Method | |||||
|---|---|---|---|---|---|
| setAttribute() | Yes | 8.0 | Yes | Yes | Yes |
بناء الجملة
element.setAttribute(attributename, attributevalue)
قيمه المعامل
| Parameter | Type | Description |
|---|---|---|
| attributename | String | Required. The name of the attribute you want to add |
| attributevalue | String | Required. The value of the attribute you want to add |
تفاصيل تقنية
| قيمة الإرجاع: | لا قيمة مردودة |
|---|---|
| إصدار DOM | كائن عنصر المستوى 1 الأساسي |
مزيد من الأمثلة
مثال
قم بتغيير حقل الإدخال إلى زر الإدخال:
document.getElementsByTagName("INPUT")[0].setAttribute("type", "button");
قبل تعيين السمة:
بعد تحديد السمة:
مثال
أضف سمة href بقيمة "www.w3schools.com" إلى عنصر <a>
document.getElementById("myAnchor").setAttribute("href", "https://www.w3schools.com");
قبل تعيين السمة:
بعد تحديد السمة:
مثال
اكتشف ما إذا كان عنصر <a> له سمة مستهدفة. إذا كان الأمر كذلك ، فغيّر قيمة السمة الهدف إلى "_self":
// Get the <a> element with id="myAnchor"
var x = document.getElementById("myAnchor");
// If the <a> element has a target attribute, set the value to "_self"
if (x.hasAttribute("target")) {
x.setAttribute("target", "_self");
}
الصفحات ذات الصلة
دروس HTML: سمات HTML
مرجع HTML DOM: أسلوب getAttribute ()
مرجع DOM HTML: أسلوب hasAttribute ()
مرجع DOM HTML: طريقة removeAttribute ()
❮ عنصر العنصر