توضح هذه المدونة استخدام عنصر DOM ارتفاع العميل بتنسيق HTML.
كيفية استخدام عنصر DOM 'clientHeight' في HTML؟
ال ' ارتفاع العميل 'تسمح الخاصية للمطورين بحساب ارتفاع المحتوى المرئي للعنصر. يساعد في تحديد موضع العناصر بالنسبة لبعضها البعض أو تحديد ما إذا كان المستخدم قد انتقل إلى الحافة اليمنى للحاوية القابلة للتمرير. كما يوفر معلومات حول المساحة المتبقية غير المستخدمة على صفحة الويب.
مثال
دعونا نسير من خلال مثال لتوضيح أفضل لخاصية 'clientHeight'. على سبيل المثال ، ' عند النقر يتم استخدام 'مستمع الحدث' لعرض النتيجة المقدمة بواسطة ' ارتفاع العميل ' ملكية:
< جسم >
< h2 بطاقة تعريف = 'عنصر' > < / h2 >
< h2 بطاقة تعريف = 'عنصر' عند النقر = 'showelementHeight ()' >
انقر فوق مقالة Linuxhint لإظهار الارتفاع!
< / h2 >
< النصي >
وظيفة showelementHeight () {
var example = document.getElementById ('element') ؛
var elementHeight = example.clientHeight ؛
تنبيه ('الارتفاع هو:' + elementHeight + 'pixels.') ؛
}
< / النصي > >
< / جسم >
شرح مقتطف الشفرة أعلاه موضح أدناه:
- في البداية ، أنشئ ' 'داخل' <الجسم> 'وتقديم بعض البيانات الوهمية لها. أيضًا ، قم بتعيين معرف ' عنصر 'إلى عنصر HTML المحدد.
- بعد ذلك ، أضف ' عند النقر() 'مستمع الحدث الذي يستدعي' ارتفاع () 'عندما ينقر المستخدم على زر' ' عنصر.
- ثم ، داخل ' ارتفاع () 'تُنشئ وظيفة متغير باسم' مثال 'الذي يعمل كمثال لعنصر HTML الذي يحتوي على معرف' عنصر '.
- بعد ذلك ، أنشئ متغيرًا آخر باسم ' عنصرارتفاع '' الذي يخزن النتيجة المقدمة بواسطة خاصية 'clientHeight'.
- بعد ذلك ، اعرض ' عنصرارتفاع '' في مربع التنبيه باستخدام ' يُحذًِر() ' طريقة.
في النهاية ، أضف خصائص CSS التالية لتصميم ' h2 ' عنصر:
< أسلوب >
#عنصر {
الهامش: 20 بكسل ؛
الحشو: 10 بكسل ؛
خلفية- لون : darkcyan؛
ارتفاع : 300 بكسل ؛
نص- محاذاة : مركز؛
خط- ارتفاع : 100 بكسل ؛
}
< / أسلوب >
في مقتطف الشفرة أعلاه ، تم تعيين خصائص CSS التالية إلى div الذي يحتوي على معرف ' عنصر ':
- ال ' 20 بكسل '،' 10 بكسل ' و ' دارك سيان 'يتم توفير قيم CSS' هامِش '،' حشوة ' و ' لون الخلفية '، على التوالي.
- يستخدم أيضًا ' ارتفاع '،' محاذاة النص ' و ' ارتفاع خط 'خصائص CSS لتحسين رؤية المستخدم.
بعد تنفيذ مقتطف الشفرة أعلاه ، تظهر صفحة الويب على النحو التالي:
يعرض الناتج أن ارتفاع العنصر المحدد معروض في مربع التنبيه ، كلما نقر المستخدم على العنصر.
خاتمة
للاستفادة من ' ارتفاع العميل 'في HTML ، حدد عنصر HTML من خلال الوصول إلى سمة id. بعد ذلك ، قم بإرفاق خاصية 'clientHeight' وعرض النتيجة. إنها خاصية للقراءة فقط وتعيد النتيجة بالبكسل. تعمل خاصية 'clientHeight' داخل علامة '