لإنشاء تصميمات صفحات ويب ديناميكية ومثالية للبكسل، تعد قياسات حجم النافذة أمرًا بالغ الأهمية لفهمها واستخدامها. قد لا يتم إنشاء تخطيط صفحة الويب المطلوبة إذا لم يتم أخذ قياس النافذة أو استخدامه بشكل صحيح. لسوء الحظ، لم يوفر HTML/CSS أي سمة أو خاصية للحصول على معرفة دقيقة حول حجم شاشة النافذة ومسافة النافذة من حدود الشاشة الأصلية.
لحسن الحظ! تعمل JavaScript على حل هذه المشكلة من خلال توفير ' window.screenLeft' و'window.screenTop 'خصائص لقياس موضع النافذة على كل من' 'س' و'المحور ص'. ' على التوالى. ينصب تركيزنا الأساسي في هذه المقالة على الحصول على موضع على طول المحور السيني بمساعدة ' window.screenLeft ' ملكية. دعنا نبدأ!
ستشرح هذه المدونة الإجراء الخاص باستخدام خاصية window.screenLeft أو الوصول إليها في JavaScript.
كيفية الوصول إلى خاصية 'window.screenLeft' في JavaScript؟
ال ' window.screenLeft تقوم خاصية JavaScript بإرجاع المعلومات المتعلقة بالموضع الأفقي للنافذة، بالنسبة للشاشة. تقوم هذه الخاصية بإرجاع القيمة الرقمية بتنسيق البكسل، مما يوضح المسافة الأفقية للنافذة من الشاشة. قم بزيارة الكود أدناه، حيث ' window.screenLeft 'يتم استخدام الخاصية:
< جسم >
< h1 أسلوب = 'اللون: أخضر بحري؛' > لينكس < / h1 >
< ص بطاقة تعريف = 'هدف' > < / ص >
< النصي >
Let i = window.screenLeft;
document.getElementById('target').innerHTML = 'يسار:' + i;
< / النصي >
< / جسم >
وصف الكود أعلاه:
- أولا، HTML ' ص 'يتم إنشاء العنصر بمعرف' هدف '.
- التالي ' window.screenLeft يتم استخدام الخاصية داخل '< النصي >' ويخزن النتيجة في المتغير ' أنا '.
- ثم حدد العنصر ذو المعرف ' هدف ' وأدخل قيمة ' i' المتغير باستخدام ' InnerHTML ' ملكية.
معاينة صفحة الويب هي كما يلي:
يُظهر الإخراج أن المسافة الأفقية من حدود الشاشة اليسرى هي صفر بكسل.
مثال: استرداد القيمة الأفقية ديناميكيًا
يمكن استخدام الخاصية screenLeft مع ' تغيير الحجم 'مستمع الحدث لتوفير الموقع في الوقت الحقيقي للنافذة المقابلة للشاشة على طول المحور السيني. وبنفس الطريقة، يمكن أيضًا استرداد الموضع على طول المحور y أو المحور الرأسي باستخدام ' window.screenTop ' ملكية. دعونا نحصل على رمز للسيناريو المحدد:
< جسم >< h1 أسلوب = 'اللون: أخضر بحري؛' > لينكسنت < / h1 >
< ص بطاقة تعريف = 'امتحان' >< / ص >
< النصي >
وظيفة ديناميكية ( ) {
اسمحوا لي = window.screenLeft;
دع ي = window.screenTop;
document.getElementById ( 'امتحان' ) .innerHTML = 'الموقع من الاتجاه الأيسر:' + أنا + '، من الاتجاه العلوي: ' + ي؛
}
window.addEventListener ( 'تغيير الحجم' ، متحرك ) ;
< / النصي >
شرح الكود أعلاه هو كما يلي:
- أولاً، تم إنشاء العنصر المستهدف بالمعرف ' امتحان '.
- التالي '< النصي >' يتم استخدام العلامة، والعلامة ' متحرك ()' يتم إنشاء وظيفة فيه.
- داخل الوظيفة، استخدم ' window.screenLeft' و'window.screenTop 'الخصائص وتخزينها في' أنا' و'ي 'المتغيرات على التوالي.
- بعد ذلك قم باختيار العنصر المستهدف من خلال الحصول على المعرف الخاص به “ امتحان 'وبمساعدة' InnerHTML 'الخاصية تعرض القيم لكلا' أنا' و'ي 'المتغيرات على صفحة الويب.
- وفي النهاية أرفق ' تغيير الحجم 'مستمع الحدث مع' نافذة او شباك ' الذي يستدعي ' متحرك ()' في كل مرة يتم فيها تغيير حجم النافذة.
معاينة صفحة الويب بعد انتهاء التجميع:
في الإخراج أعلاه، يتم استقبال اختلاف النافذة من الجانبين العلوي واليسرى بالبكسل عندما يتم تغيير حجم النافذة.
هذا كل ما يتعلق بـ ' window.screeLeft خاصية في جافا سكريبت.
خاتمة
للوصول إلى ' window.screenLeft ' الخاصية في JavaScript وأرفق ' تغيير الحجم 'مستمع الحدث إلى' نافذة او شباك '. يؤدي هذا إلى استدعاء وظيفة رد الاتصال في كل مرة يتم فيها تغيير حجم النافذة. داخل هذه الدالة، قم بإنشاء متغير يخزن ' window.screenLeft ' ملكية. علاوة على ذلك، قم باسترجاع مرجع العنصر المستهدف وعرض قيم هذا المتغير فوقه. لقد شرحت هذه المدونة عملية الوصول إلى خاصية window.screenLeft في JavaScript.