خصائص HTML DOM Element clientHeight

التعريف والاستخدام

clientHeight الخصائص تعود بارتفاع العنصر المرئي، بما في ذلك الهوامش، ولكن لا تشمل الحواف، شريط التمرير أو الهوامش الخارجية، بالبكسل.

clientHeight الخصائص قابلة للقراءة فقط.

يرجى الرجوع إلى:دليل تعليمات CSS Frame Model

يرجى الرجوع إلى:

خصائص clientWidth

خصائص clientTop

خصائص clientLeft

خصائص offsetHeight

خصائص offsetWidth

لإضافة شريط التمرير إلى العنصر، استخدم صفة overflow الـCSS。

مثال

مثال 1

الحصول على الارتفاع والعرض لـ "myDIV"، بما في ذلك الهوامش:

const element = document.getElementById("myDIV");
let text = "clientHeight: " + element.clientHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px";

جرب بنفسك

مثال 2: الفرق بين clientHeight/clientWidth و offsetHeight/offsetWidth

لا يوجد شريط تمرير:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

جرب بنفسك

يوجد شريط التمرير:

const element = document.getElementById("myDIV");
let text = "";
text += "clientHeight: " + element.clientHeight + "px<br>";
text += "offsetHeight: " + element.offsetHeight + "px<br>";
text += "clientWidth: " + element.clientWidth + "px<br>";
text += "offsetWidth: " + element.offsetWidth + "px";

جرب بنفسك

القواعد

element.clientHeight

القيمة المعدلة

نوع الوصف
رقم ارتفاع العنصر المرئي (بالأرقام البكسلية)، بما في ذلك الهوامش.

دعم المتصفح

جميع المتصفحات تدعم element.clientHeight：

كروم IE إدج فايرفوكس سفاري أوبرا
كروم IE إدج فايرفوكس سفاري أوبرا
دعم دعم دعم دعم دعم دعم