Client Properties
في هذا الدرس سوف نتعرف علي مجموعة من الخصائص التي تبدا بكلمة client وهما يستخدمان في معرفة القياسات الخاصة للعناصر الخارجية مثل padding
التاريخ
14 نوفمبر 2021
الدروس
146
المستوى
العامة
اللغة
انجليزي
المشاهدات
1022
المواضيع
24
الشروحات chevron_left Client Properties chevron_left JavaScript
Client Properties
</> clientHeight
clientHeight : هي عبارة عن خاصية من خصائص ال Dom تساعد على قياس الارتفاع الداخلي لعنصر بوحدات البكسل بما في ذلك خصائص CSS مثل padding ولكنها لا تتضمن ارتفاع شريط التمرير الأفقي أو الاطار border أو الهامش margin
var element = document.getElementById("GFG"); var text = ""; text += "ClientHeight: " + element.clientHeight + "px" + "<br>"; document.getElementById("demo").innerHTML = text;
</> clientLeft
- clientLeft : هي عبارة عن خاصية من خصائص ال DOM تستخدم في ارجاع عرض او قيمة الأطار الموجود في الناحية اليسرى اذا تم تعيينها لعنصر ما بوحدة البيكسل px
- كما أنها لا تشمل قيم كل من padding و margin
- clientTop : هي خاصية للقراءة فقط
- قيمة الإرجاع: تقوم بإرجاع قيمة رقمية تمثل عرض الاطار الموجود في الناحية اليسرى لعنصر.
Syntax
element.clientLeft
Example
var w = document.getElementById("myid"); /* Using clientTop property */ var x = "Border-left-Width is: " + w.clientLeft + "px<br>"; document.getElementById("sudo").innerHTML = x;
</> clientTop
- clientTop : هي عبارة عن خاصية من خصائص ال DOM تستخدم في ارجاع عرض او قيمة الأطار العلوي اذا تم تعيينها لعنصر ما بوحدة البيكسل px
- كما أنها لا تشمل قيم كل من padding و margin
- clientTop : هي خاصية للقراءة فقط
- قيمة الإرجاع: تقوم بإرجاع قيمة رقمية تمثل عرض الحد العلوي لعنصر.
Syntax
element.clientTop
Example
var w = document.getElementById("myid"); /* Using clientTop property */ var x = "Border-Top-Width is: " + w.clientTop + "px<br>"; document.getElementById("sudo").innerHTML = x;
</> clientWidth
هي عبارة عن خاصية تقوم بإرجاع عرض عنصر HTML وتتضمن المساحة المتروكة padding ولكنها لا تتضمن عرض الهامش margin والاطار border وشريط التمرير scrollbar
سميت الخاصية بأسم "viewable " لأنه إذا كان محتوى العنصر أكبر من العرض الفعلي للعنصر ، فإن هذه الخاصية ستعيد فقط العرض الظاهر
Syntax
element.clientWidth
Example
var elmnt = document.getElementById("myDIV"); var txt = "Height with padding: " + elmnt.clientHeight + "px<br>"; txt += "Width with padding: " + elmnt.clientWidth + "px";
Example
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";