ملخص لأساليب الحصول على ارتفاع وعرض صفحات الويب بواسطة JavaScript

كائن الشاشة

احصل على ارتفاع وعرض الشاشة (دقة)

 الشاشة.

كائن نافذة

احصل على وضع النافذة وحجمها

 window.screentop // المسافة من الجزء العلوي من النافذة إلى أعلى نافذة الشاشة. screenleft // المسافة من الجانب الأيسر من النافذة إلى الجانب الأيسر من نافذة الشاشة. // Chrome 1366 FF 1366 IE 1366 Window.Innerheight // ارتفاع وجهة النظر في النافذة ترتبط هذه القيمة بعوامل مثل ما إذا كان المتصفح يعرض شريط القائمة ، إلخ. تنبيه (window.innerheight) ؛ // chrome 643 ff 657 ie 673window.outerwidth // عرض نافذة المتصفح نفسه (عرض المنطقة المرئية + عرض الحدود المتصفح) (window.outerwidth) ؛ . // Chrome 728 FF 744 IE 744

كائن العنصر

قبل إدخال ارتفاعات وعرضة كائنات العناصر المختلفة ، من الضروري شرح نموذج المربع.

حجم مربع مربع الافتراضي: مربع المحتوى ؛

 BoxWidth = 2*Margin + 2*Border + 2*Padding + WidthboxHeight = 2*Margin + 2*Border + 2*Padding + Hight

عندما لا يظهر شريط التمرير

 body {margin: 0 ؛}#demo {width: 100px ؛ الارتفاع: 100px ؛ الحشو: 10 بكسل ؛ الحدود: 20 بكسل ؛ الهامش: 30 بكسل ؛ خلفية اللون: أحمر ؛} <div id = "demo"> 123456789 123456789 </viv>

عميل العميل: إرجاع العرض المرئي للمحتوى على الصفحة (باستثناء الحدود أو الهوامش أو أشرطة التمرير)

العميل: إرجاع الارتفاع المرئي للمحتوى على الصفحة (باستثناء الحدود أو الهوامش أو أشرطة التمرير)

 ClientWidth = 2*padding + width - scrollbarwidth console.log (document.getElementById ('Demo'). clientwidth) ؛ // 120 في هذا الوقت scrollbarwidth = 0clientheight = 2*padding + الارتفاع - scrollbarheight console.log (document.getElementById ('demo'). clientHeight) ؛ // 120 في هذا الوقت scrollbarwidth = 0

عرض الإزاحة: إرجاع عرض العنصر بما في ذلك الحدود والملء ، ولكنه لا يشمل الهوامش

Offsetheight: إرجاع ارتفاع العنصر بما في ذلك الحدود والملء ، ولكن لا يشمل الهوامش

 OffsetWidth = 2*الحدود + 2*padding + width console.log (document.getElementById ('Demo'). OffsetWidth) // 160offsetheight = 2*border + 2*padding + height console.log (document.getElementById ('demo'). Offsetheight) // 160

OffsetLeft: يحصل على الموضع الأيسر المحسوب للكائن بالنسبة إلى التصميم أو الإحداثيات الأصل المحددة بواسطة خاصية الإزاحة

Offsettop: يحصل على الموضع الأعلى المحسوب للكائن بالنسبة إلى التصميم أو الإحداثي الأصل المحدد بواسطة خاصية Offsettop

 console.log (document.getElementById ('Demo'). OffsetLeft) //30Console.log(document.getElementById('demo'mn).offsettop) // 30

عندما يظهر شريط التمرير

 الجسم {الهامش: 0 ؛ الحشو: 20 بكسل ؛ العرض: 1000px ؛ الارتفاع: 500px ؛} <div id = "demo"> 123456789123456789 </viv>

Scrollwidth: إرجاع عرض العنصر الكامل (بما في ذلك الأماكن المخفية مع قضبان التمرير)

Scrollheight: إرجاع ارتفاع العنصر بأكمله (بما في ذلك الأماكن المخفية بأشرطة التمرير)

 scrollwidth = 2*padding + width console.log (document.body.scrollwidth) // 1040scrollheight = 2*padding + width console.log (document.body.scrollheight) // 540

Scrolltop: ارتفاع العنصر مخفي المحتوى عند الانزلاق أسفل كتلة التمرير. عندما لا يتم تعيينه ، يكون الافتراضي هو 0 ، ويتغير قيمته عند التمرير كتلة التمرير

Scrollleft: عرض العنصر المخفي للمحتوى عند تحريك كتلة التمرير إلى اليمين. عندما لا يتم تعيينه ، يكون الافتراضي هو 0 ، ويتغير قيمته عند التمرير كتلة التمرير

كائن الحدث

يمثل كائن الحدث حالة الحدث ، مثل العنصر الذي يحدث فيه الحدث ، وحالة مفتاح لوحة المفاتيح ، وموضع الماوس ، وحالة زر الماوس.

event.pagex: بالنسبة إلى إحداثيات الصفحة بأكملها ، فإن الزاوية اليسرى العليا من الصفحة هي المسافة الأفقية من أصل الإحداثي إلى النقطة التي يوجد بها الماوس (لا يدعمها IE8)

event.pagey: بالنسبة إلى إحداثيات الصفحة بأكملها ، فإن الزاوية اليسرى العليا من الصفحة هي المسافة العمودية من أصل الإحداثي إلى النقطة التي يوجد فيها الماوس (لا يدعمه IE8)

event.clientx: إحداثيات المنطقة البصرية النسبية ، باستخدام الركن العلوي الأيسر من المنطقة البصرية للمستعرض كمسافة أفقية من أصل الإحداثيات إلى النقطة التي يوجد بها الماوس ، باستخدام الزاوية اليسرى العليا من المنطقة البصرية للمتصفح كمسافة أفقية من أصل الإحداثيات إلى النقطة التي تقع فيها الماوس

event.clienty: إحداثيات المنطقة البصرية النسبية ، باستخدام الزاوية العلوية اليسرى من المنطقة البصرية للمتصفح كمسافة رأسية من أصل الإحداثي إلى النقطة التي يوجد

event.screenx: بالنسبة إلى إحداثيات شاشة الكمبيوتر ، فإن المسافة الأفقية من أصل الإحداثي

event.screeny: نسبة إلى إحداثيات شاشة الكمبيوتر ، فإن المسافة العمودية من أصل الإحداثيات إلى النقطة التي يوجد

Event.Offsetx: بالنسبة إلى إحداثياتها الخاصة ، فإن المسافة الأفقية من أصل الإحداثيات من الزاوية اليسرى العليا من الحشو الخاص بها إلى النقطة التي يوجد

Event.Offsety: نسبة إلى إحداثياتها الخاصة ، فإن المسافة الأفقية من أصل الإحداثيات للركن الأيسر العلوي من الحشو الخاص بها إلى النقطة التي يوجد فيها الماوس يعتمد على مسافة أفقي من أصل الإحداثيات.

الملخص أعلاه لطرق الحصول على ارتفاعات وعرض ومواقع صفحات الويب في JavaScript هو المحتوى الكامل المشترك من قبل المحرر. آمل أن يعطيك مرجعًا وآمل أن تدعم wulin.com أكثر.