offsetHeight : هي عبارة عن خاصية تستخدم في ارجاع قيمة ارتفاع عنصر معين بقيمة البيكسل وهذه القيمة تتضمن معها قيمة كل من ال ( padding و border و scrollbar ) ولا تتضمن معها قيمة ال Margin

- يمكنك استخدام خاصية كل من " clientHeight " و "clientWidth " لأرجاع ارتفاع وعرض عنصر معين ولكن هذه القيمة تتضمن معها قيمة ال Padding فقط

-offsetHeight = height + border + padding + horizontal scrollbar

Syntax

element.offsetHeight

Example

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

جربها بنفسك

</> offsetWidth

offsetWidth : هي عبارة عن خاصية تستخدم في ارجاع قيمة عرض عنصر معين بقيمة البيكسل وهذه القيمة تتضمن معها قيمة كل من ال ( padding و border و scrollbar ) ولا تتضمن معها قيمة ال Margin

-offsetWidth= width + border + padding + vertical scrollbar

element.offsetWidth

Example

var element = document.getElementById("GFG");

			var txt = "Width including padding and border: "
			+ element.offsetWidth + "px";

			document.getElementById("demo").innerHTML = txt;

جربها بنفسك

</> offsetLeft

تقوم خاصية offsetLeft بإرجاع الموضع الأيسر (بالبكسل) بالنسبة إلى الجانب الأيسر لعنصر offsetParent. القيمة التي تم إرجاعها تشمل:

left position , margin
left padding و scrollbar و border الخاص بالعنصر offsetparent

Syntax

element.offsetLeft

Example

var testDiv = document.getElementById("GFG");

				document.getElementById("demo").innerHTML
					= "offsetLeft: "+ testDiv.offsetLeft;

جربها بنفسك

</> offsetParent

تقوم خاصية offsetTop بإرجاع الموضع العلوي (بالبكسل) بالنسبة إلى أعلى عنصر offsetParent. القيمة التي تم إرجاعها تشمل:

الموضع العلوي و margin هامش
ال padding العلوي و padding و scrollbar و border

Example

/* Return offset parent of div */
			var offsetp =
				document.getElementById("GFG");
		
			document.getElementById("myfun").innerHTML =
				offsetp.offsetParent;

جربها بنفسك

</> offsetTop

Syntax

object.offsetTop

Example

var x = document.getElementById("offsetdiv");
			document.getElementById("demo").innerHTML =
			offsetdiv.offsetTop;

جربها بنفسك

معلومات تهمك

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

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

التالى

CLOSETAG

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

Offset Prosperities

التاريخ

الدروس

المستوى

اللغة

المشاهدات

المواضيع

الشروحات Offset Prosperities JavaScript