JavaScript

Client Properties

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

التاريخ

14 نوفمبر 2021

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

1022

المواضيع

24
الشروحات chevron_left Client Properties chevron_left JavaScript

Client Properties

مراجعة تقنية
Mostafa Hefny

Mostafa Hefny

CEO & Founder CloseTag

</> 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";
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات