انتقل إلى محتوى الدرس
ابدأ رحلتك
فقرة فرعية #4 من درس: Client Properties

clientWidth

في هذا الدرس سوف نتعرف علي مجموعة من الخصائص التي تبدا بكلمة client وهما يستخدمان في معرفة القياسات الخاصة للعناصر الخارجية مثل padding 

1 صفوف تعليمية
جافا سكريبت
2,789 مشاهدة

شرح صفوف ومحتوى الفقرة

الصف 1 شرح توضيحي

هي عبارة عن خاصية تقوم بإرجاع عرض عنصر HTML وتتضمن المساحة المتروكة  padding ولكنها لا تتضمن عرض الهامش margin  والاطار border  وشريط التمرير scrollbar 

سميت الخاصية بأسم "viewable " لأنه إذا كان محتوى العنصر أكبر من العرض الفعلي للعنصر ، فإن هذه الخاصية ستعيد فقط العرض الظاهر



Syntax

HTML 
element.clientWidth

Example

HTML 
var elmnt = document.getElementById("myDIV");
var txt = "Height with padding: " + elmnt.clientHeight + "px<br>";
txt += "Width with padding: " + elmnt.clientWidth + "px";
جرّب بنفسك

Example

HTML 
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";
جرّب بنفسك

جميع فقرات هذا الدرس (Client Properties)