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";

جربها بنفسك

معلومات تهمك

لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.

عدد المشاركات

التالى

CLOSETAG

منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.

Client Properties

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات Client Properties JavaScript