تعمل هذه المقالة على تحديد الهدف والعمل واستخدام طريقة 'getComputedStyle ()' لكائن النافذة في JavaScript.
ماذا تفعل 'getComputedStyle ()' طريقة كائن النافذة في JavaScript؟
ال ' getComputedStyle () تقوم طريقة 'بإرجاع كائن' CSSStyleDecistration 'الذي يحتوي على مجموعة من خصائص CSS وقيمها. يحسب خصائص تصميم عنصر HTML المستهدف. بالإضافة إلى ذلك ، يلعب أيضًا دورًا مهمًا في حساب خصائص التصميم لجزء معين من عنصر HTML.
بناء الجملة
نافذة او شباك. getComputedStyle ( عنصر و عنصر زائف )
في النحو أعلاه:
- نافذة او شباك: إنه الكائن العام الذي يمثل نافذة المتصفح.
- عنصر: وهي تحدد عنصر HTML المعين الذي يحتاج أسلوبه إلى الحساب.
- العنصر الزائف: يشير إلى جزء من عنصر HTML المحدد ، على سبيل المثال ، الحرف الأول ، الحرف الأخير ، إلخ.
ينفذ القسم التالي التوضيح العملي لأسلوب 'getComputedStyle ()' بمساعدة الأمثلة.
كود HTML (بما في ذلك أنماط CSS)
أولاً ، احصل على نظرة عامة على كود HTML التالي:
< رأس >
< أسلوب >
h3{
حجم الخط: 20 بكسل ؛
لون الخلفية: أخضر أصفر
}
< / أسلوب >
< / رأس >
< جسم >
< h2 > استخدم أسلوب getComputedStyle () لكائن النافذة < / h2 >
< h3 بطاقة تعريف = 'عرض' > حجم الخط لعنصر HTML المحدد هو: < / h3 >
< ص بطاقة تعريف = 'عينة' > < / ص >
في سطور التعليمات البرمجية أعلاه:
- ال ' <ستايل> تطبق العلامة التصميم المحدد لـ ' 'عنصر HTML.
- في ال ' <الجسم> '، يتم تضمين عنوان فرعي في' '
- بعد ذلك ، العنصر '
' الذي يحتوي على معرف ' تجريبي 'عنوانًا فرعيًا ثانيًا.
- أخيرًا ، ' تشير 'العلامة إلى فقرة فارغة بمعرف' عينة لعرض خصائص CSS المحسوبة للعنصر المستهدف.
ملحوظة: يتم اتباع رمز HTML هذا في جميع الأمثلة المذكورة في هذا المنشور.
مثال 1: تطبيق طريقة 'getComputedStyle ()' لحساب حجم الخط لعنصر HTML
يطبق هذا المثال طريقة 'getComputedStyle ()' للحصول على حجم خط عنصر HTML الهدف.
كود جافا سكريبت
ضع في اعتبارك رمز JavaScript المذكور:
< النصي >مقدار ثابت عنصر = وثيقة. getElementById ( 'عرض' ) ؛
مقدار ثابت الهدف = نافذة او شباك. getComputedStyle ( عنصر )
اسمحوا الحجم = الهدف. getPropertyValue ( 'حجم الخط' ) ؛
وثيقة. getElementById ( 'عينة' ) . داخلي HTML = مقاس ؛
النصي >
في مقتطف الشفرة أعلاه:
- نعلن متغير ' عنصر 'مع كلمة رئيسية' const 'التي تستخدم' getElementById () 'للوصول إلى عنصر'
'عبر معرفه' تجريبي '.
- بعد ذلك ، قم بتطبيق ' getComputedStyle () 'لحساب خصائص CSS لعنصر'
'الذي تم جلبه.
- بعد ذلك ، ' مقاس 'يطبق المتغير' getPropertyValue () 'طريقة تعرض قيمة خاصية CSS المطبقة' حجم الخط 'كسلسلة.
- أخيرًا ، تصل طريقة 'getElementById ()' إلى الفقرة الفارغة وتعرض قيمة خاصية CSS المحسوبة باستخدام ' داخلي HTML ' ملكية.
انتاج |
كما رأينا ، يعرض الإخراج قيمة حجم الخط المطبقة مقابل عنصر HTML المقابل ، أي '
'.
مثال 2: تطبيق طريقة 'getComputedStyle ()' لحساب لون الخلفية لعنصر HTML
في هذا المثال ، تُستخدم الطريقة التي تمت مناقشتها لحساب لون الخلفية لعنصر HTML المحدد:
< النصي >مقدار ثابت عنصر = وثيقة. getElementById ( 'عرض' ) ؛
مقدار ثابت الهدف = نافذة او شباك. getComputedStyle ( عنصر )
دعونا bgcolor = الهدف. getPropertyValue ( 'لون الخلفية' ) ؛
وثيقة. getElementById ( 'عينة' ) . داخلي HTML = bgcolor ؛
النصي >
في كتلة التعليمات البرمجية أعلاه ، ' getComputedStyle () 'الطريقة' لون الخلفية 'للعنصر'
'الذي يكون معرفه' demo 'ويعيد قيمته كـ' rgb 'عبر' getPropertyValue () ' طريقة.
انتاج |
يُظهر الناتج بوضوح لون الخلفية المحسوب لعنصر HTML الذي تم جلبه.
خاتمة
تقدم JavaScript ' getComputedStyle () ”لحساب خصائص نمط CSS لعنصر HTML الهدف. القيمة المحسوبة لهذه الطريقة هي سلسلة تحتوي على خصائص CSS وقيمها. يمكن تنفيذه بطرق مختلفة باستخدام JavaScript للحصول على خصائص CSS لأي عنصر HTML. قدم هذا المنشور عرضًا تفصيليًا للهدف والعمل واستخدام طريقة 'getComputedStyle ()' لكائن النافذة في JavaScript.