مثال
إضافة اللون الأحمر إلى <h1> العنصر:
document.getElementById("myH1").style.color = "red"; قبل تعيين النمط:
Hello World!
بعد تعيين النمط:
Hello World!
انها محاولة لنفسك » أكثر "Try it Yourself" الأمثلة أدناه.
تعريف والاستخدام
الخاصية أسلوب بإرجاع كائن CSSStyleDeclaration، الذي يمثل سمة نمط عنصر ل.
يتم استخدام الخاصية أسلوب الحصول على أو تعيين نمط معين من عنصر باستخدام خصائص CSS مختلفة.
ملاحظة: ليس من الممكن لتحديد الأنماط عن طريق تعيين السلسلة إلى منشأة، على سبيل المثال عنصر .style = "color: red;" . لتعيين نمط عنصر، إلحاق "CSS" الخاصية لأسلوب وتحديد قيمة، مثل هذا:
element .style.backgroundColor = "red"; // set the background color of an element to red Try it
كما ترون، بناء الجملة جافا سكريبت لإعداد خصائص CSS يختلف قليلا من CSS (backgroundColor instead of background-color) .
للحصول على قائمة من كافة الخصائص المتوفرة، يرجى الاطلاع على مرجع كائن أسلوب .
ملاحظة: منشأة يعود فقط الإعلانات CSS المنصوص عليها في مضمنة سمة نمط العنصر، على سبيل المثال
<ع النمط = "اللون: الأحمر؛">. وليس من الممكن استخدام هذه الخاصية للحصول على معلومات حول قواعد النمط من <head> القسم في وثيقة أو ورقة نمط خارجية.
ومع ذلك، يمكنك الوصول إلى <style> عنصر من <head> باستخدام وثيقة. getElementsByTagName() :
var x = document.getElementsByTagName("STYLE")[0]; // get the first
<style> element Try it
ملاحظة: من المستحسن استخدام الخاصية أسلوب بدلا من element . setAttribute("style", "...") طريقة، لأنه سوف منشأة لا الكتابة خصائص CSS الأخرى التي قد تكون محددة في style السمة.
دعم المتصفح
| خاصية | |||||
|---|---|---|---|---|---|
| style | نعم فعلا | نعم فعلا | نعم فعلا | نعم فعلا | نعم فعلا |
بناء الجملة
العودة خصائص نمط:
element .style. property تعيين خصائص نمط:
element .style. property = value قيم الممتلكات
| القيمة | وصف |
|---|---|
| value | يحدد قيمة الخاصية المحددة. على سبيل المثال، للخاصية borderBottom: عنصر .style.borderBottom = "الأحمر الصلبة 2px". |
تفاصيل تقنية
| قيمة الإرجاع: | كائن CSSStyleDeclaration، وهو ما يمثل سمة نمط عنصر ل |
|---|---|
| صفحة DOM | دوم المستوى 2 CSS |
مزيد من الأمثلة
مثال
الحصول على قيمة <p> العنصر كبار الحدود:
var x = document.getElementById("myP").style.borderTop;ونتيجة لالعاشر على النحو التالي:
5px solid red انها محاولة لنفسك » صفحات ذات صلة
CSS دروس: CSS دروس
CSS المرجعي: خصائص CSS
HTML DOM المرجعي: نمط كائن المرجعي
المرجع HTML: HTML <style> العلامة
<كائن العنصر