انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 146
دورة جافا سكريبت

Offset Prosperities

في هذا الدرس سوف نتعرف علي مجموعة من خصائص التي تسمي offset وتستخدم في ارجاع حجم المساحات الخارجية للعناصر باستخدام لغة ال java Script 

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
5
الأمثلة
10
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
2,701
محتوى الدرس
في هذا الدرس 5تصفّح المواضيع

offsetHeight




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

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

-offsetHeight = height + border + padding + horizontal scrollbar   

offsetHeight

Syntax

HTML 
element.offsetHeight

Example

HTML 
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 

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


-offsetWidth= width + border + padding + vertical scrollbar  

HTML 
element.offsetWidth

Example

HTML 
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

HTML 
element.offsetLeft

Example

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

				document.getElementById("demo").innerHTML
					= "offsetLeft: "+ testDiv.offsetLeft;
جرّب بنفسك

offsetParent

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

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


HTML

Example

HTML 
/* Return offset parent of div */
			var offsetp =
				document.getElementById("GFG");
		
			document.getElementById("myfun").innerHTML =
				offsetp.offsetParent;
جرّب بنفسك

offsetTop

Syntax

HTML 
object.offsetTop

Example

HTML 
var x = document.getElementById("offsetdiv");
			document.getElementById("demo").innerHTML =
			offsetdiv.offsetTop;
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…