خاصية نمط HTML DOM
مثال
أضف لونًا أحمر إلى عنصر <h1>:
document.getElementById("myH1").style.color = "red";
المزيد من الأمثلة "جربها بنفسك" أدناه.
التعريف والاستخدام
تقوم خاصية النمط بإرجاع كائن CSSStyleDeclusion ، والذي يمثل سمة نمط العنصر.
تُستخدم خاصية النمط للحصول على نمط محدد أو تعيينه لعنصر باستخدام خصائص CSS مختلفة.
ملاحظة: لا يمكن تعيين الأنماط من خلال تخصيص سلسلة لخاصية النمط ، على سبيل المثال element .style = "color: red؛". لتعيين نمط عنصر ، ألحق خاصية "CSS" بالنمط وحدد قيمة ، مثل هذا:
element.style.backgroundColor = "red"; // set the background color of an element to red
كما ترى ، فإن بناء جملة JavaScript لإعداد خصائص CSS يختلف قليلاً عن CSS (backgroundColor بدلاً من background-color).
للحصول على قائمة بجميع الخصائص المتاحة ، راجع مرجع كائن النمط .
ملاحظة: تقوم خاصية style بإرجاع فقط إعلانات CSS المعينة في سمة النمط المضمنة للعنصر ، على سبيل المثال
<p style = "color: red؛">. لا يمكن استخدام هذه الخاصية للحصول على معلومات حول قواعد الأنماط من قسم <head> في المستند أو أوراق الأنماط الخارجية.
ومع ذلك ، يمكنك الوصول إلى عنصر <style> من <head> باستخدام document.getElementsByTagName ():
var x = document.getElementsByTagName("STYLE")[0]; // get the first <style> element
ملاحظة: يوصى باستخدام خاصية النمط بدلاً من عنصر .setAttribute ("style"، "...") طريقة ، لأن خاصية style لن تستبدل خصائص CSS الأخرى التي قد تكون محددة في سمة النمط.
دعم المتصفح
Property | |||||
---|---|---|---|---|---|
style | Yes | Yes | Yes | Yes | Yes |
بناء الجملة
خصائص نمط الإرجاع:
element.style.property
تعيين خصائص النمط:
element.style.property = value
قيم الملكية
Value | Description |
---|---|
value |
Specifies the value of the specified property. For example, for the borderBottom property: element.style.borderBottom = "2px solid red"; |
تفاصيل تقنية
قيمة الإرجاع: | كائن CSSStyleDeclusion ، يمثل سمة نمط العنصر |
---|---|
إصدار DOM | Dom المستوى 2 CSS |
مزيد من الأمثلة
مثال
احصل على قيمة الحد العلوي للعنصر <p>:
var x = document.getElementById("myP").style.borderTop;
الصفحات ذات الصلة
دروس CSS : دروس CSS
مرجع CSS: خصائص CSS
مرجع HTML DOM: مرجع كائن النمط
مرجع HTML: علامة HTML <style>
❮ عنصر الكائن