يوضح هذا الدليل هدف خاصية 'style' لعنصر HTML DOM وعملها في JavaScript.
كيف تعمل خاصية 'style' لعنصر HTML DOM في JavaScript؟
HTML DOM ' أسلوب 'هي خاصية للقراءة فقط تعمل بناءً على خصائص التصميم المخصصة وفقًا لذلك. كما أنه يعيد ' إعلان CSSStyle 'الذي يحتوي على جميع سمات النمط المضمنة لعنصر HTML المحدد.
ملحوظة: لا يحتوي كائن 'CSSStyleDecistration' على سمات نمط CSS المحددة في قسم الرأس.
بناء الجملة (تعيين خاصية نمط)
عنصر. أسلوب . ملكية = قيمةوفقًا للصيغة أعلاه ، فإن ' أسلوب 'تدعم خاصية' معلمة واحدة فقط ' قيمة 'التي تمثل قيمة خاصية التصميم المحددة.
بناء الجملة (إرجاع خاصية النمط)
عنصر. أسلوب . ملكيةدعنا ننفذ الصيغ التي تمت مناقشتها أعلاه لخاصية 'النمط' عمليًا.
مثال 1: استخدم خاصية 'style' لتعيين لون عنصر HTML معين
يطبق هذا المثال البنية الأساسية لـ ' أسلوب 'لتعيين قيمة خاصية' النمط 'بحيث يتغير لون عنصر HTML المحدد.
كود HTML
أولاً ، انتقل إلى كود HTML المحدد:
< h2 > استخدم خاصية النمط في JavaScript h2 >
< h3 id = 'H3' > العنوان الفرعي الثاني. h3 >
في سطور الكود أعلاه:
- ال ' تحدد علامة HTML العنوان الفرعي الأول.
- ال ' 'تنشئ العلامة العنوان الفرعي الثاني للمستوى 3 بمعرف مخصص' H3 '.
كود جافا سكريبت
بعد ذلك ، اتبع كود JavaScript المذكور:
< النصي >وثيقة. getElementById ( 'H3' ) . أسلوب . لون = 'أخضر' ؛
النصي >
في مقتطف الشفرة أعلاه ، ' document.getElementById () 'للوصول إلى' عنصر 'عبر معرفه' H3 'لتعيين المحدد' لون 'قيمة السمة للعنصر عبر' النمط. اللون ' ملكية.
انتاج |
يوضح الناتج أن التمثيل المرئي لعنصر HTML المستهدف يتم تعيينه وفقًا لذلك باستخدام خاصية 'style'.
مثال 2: استخدم خاصية 'style' للحصول على قيمة سمة 'style' المطبقة
في هذا المثال ، تساعد خاصية 'style' في اكتشاف سمة 'style' المعينة لعنصر HTML باستخدام بناء الجملة المعمم (إرجاع خاصية النمط).
كود HTML
تم ذكر كود HTML هنا:
< h2 > استخدم خاصية النمط في JavaScript h2 >< h3 id = 'H3' أسلوب = 'لون الخلفية: برتقالي' > قيمة لون خلفية العنوان الفرعي الثاني هي : h3 >
< معرف h4 = 'عرض' > h4 >
في هذا الكود:
- ال ' تستخدم علامة HTML السمة 'style' التي تحدد لون الخلفية لعنصر HTML '
'.
- ال ' 'تنشئ العلامة عنوانًا فرعيًا فارغًا للمستوى 4 به معرف' تجريبي '.
كود جافا سكريبت
الآن ، انظر إلى كود JavaScript المحدد:
< النصي >مقدار ثابت قيمة = وثيقة. getElementById ( 'H3' ) . أسلوب . لون الخلفية ؛
وثيقة. getElementById ( 'عرض' ) . داخلي HTML = قيمة ؛
النصي >
في الكود المكتوب أعلاه:
- المتغير ' قيمة 'مع' مقدار ثابت 'الكلمة الرئيسية التي تستخدم' document.getElementById () 'لجلب عنصر'
'باستخدام معرفه للحصول على قيمة سمة' style 'المطبقة وتطبيقها على العنصر ، أي'
'عبر خاصية' style '.
- يتم استخدام طريقة 'document.getElementById ()' مرة أخرى للوصول إلى عنصر '
' الفارغ المضاف وعرض قيمة سمة 'النمط' المخصصة مقابل عنصر HTML الذي تم جلبه وإلحاقه كعنوان فرعي عبر ' داخلي HTML ' ملكية.
انتاج |
يطبق الإخراج لون الخلفية على العنصر ويتم أيضًا إرجاع قيمة سمة 'النمط' المحددة وفقًا لذلك.
خاتمة
يستخدم JavaScript ' أسلوب 'لتعيين وإرجاع خصائص' النمط 'المضمنة لعنصر DOM HTML. يتطلب 'قيمة' إضافية لتطبيق الوظيفة المطلوبة وفقًا لذلك. بصرف النظر عن الإعداد والاسترداد ، من المفيد أيضًا تغيير سمة 'النمط' الحالية. يوضح هذا الدليل الهدف الرئيسي والعمل والتنفيذ العملي لخاصية نمط عنصر HTML DOM.