أحدث البرامج التعليمية وتطوير الشبكة
 

HTML DOM clientWidth Propery

<كائن العنصر

مثال

الحصول على الطول والعرض ل <div> العنصر، بما في ذلك الحشو:

var elmnt = document.getElementById("myDIV");
var txt = "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px";

وستكون النتيجة من النص على النحو التالي:

Height with padding: 270px
Width with padding: 420px
انها محاولة لنفسك »

أكثر "Try it Yourself" الأمثلة أدناه.

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

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

السبب في أن "viewable" تم تحديد كلمة، هو أنه إذا كان محتوى العنصر هو أوسع من العرض الفعلي للعنصر، هذا العقار سيعود فقط عرض مرئيا (See "More Examples") .

ملاحظة: لفهم هذه الخاصية، يجب أن نفهم نموذج صندوق CSS .

نصيحة: غالبا ما يتم استخدام هذه الخاصية مع clientHeight الممتلكات.

نصيحة: استخدم offsetHeight و offsetWidth خصائص للعودة الارتفاع للعرض وعرض عنصر، بما في ذلك الحشو، والحدود والتمرير.

نصيحة: لإضافة التمرير إلى عنصر، استخدم CSS تجاوز الممتلكات.

هذه الخاصيه للقراؤه فقط.

دعم المتصفح

خاصية
clientWidth نعم فعلا نعم فعلا نعم فعلا نعم فعلا نعم فعلا

بناء الجملة

element .clientWidth

تفاصيل تقنية

قيمة الإرجاع: الرقم الذي يمثل العرض للعرض عنصر بالبكسل، بما في ذلك الحشو
أمثلة

مزيد من الأمثلة

مثال

يوضح هذا المثال الفرق بين clientHeight / clientWidth وoffsetHeight / offsetWidth:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding and border: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding and border: " + elmnt.offsetWidth + "px";

وستكون النتيجة من النص على النحو التالي:

Height with padding: 270px
Height with padding and border: 280px
Width with padding: 420px
Width with padding and border: 430px
انها محاولة لنفسك »

مثال

يوضح هذا المثال الفرق بين clientHeight / clientWidth وoffsetHeight / offsetWidth، وعندما نضيف شريط التمرير إلى العنصر:

var elmnt = document.getElementById("myDIV");
var txt = "";
txt += "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Height with padding, border and scrollbar: " + elmnt.offsetHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px<br>";
txt += "Width with padding, border and scrollbar: " + elmnt.offsetWidth + "px";

وستكون النتيجة من النص على النحو التالي:

Height with padding: 249px
Height with padding, border and scrollbar: 280px
Width with padding: 399px
Width with padding, border and scrollbar: 430px
انها محاولة لنفسك »

<كائن العنصر