jQuery - Dimensions
ستتعلم في هذا الدرس كيف يمكنك الحصول علي ابعاد مثل height و width و margin و padding اي Elemen داخل صفحة الويب بااستخدام مكتبة ال jQuery
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
jQuery - Dimensions
</> jQuery - Dimensions
بواسطة ال jQuery بسهوله جداً تستطيع معرفة ابعاد اي Element علي نافذة المتصفح سواء كان Margin او Padding او height او width او المساحه الخارجية لاي Element
jQuery Dimension Methods
- ( ) width
- ( ) height
- ( ) innerWidth
- ( ) innerHeight
- ( ) outerWidth
- ( ) outerHeight
</> jQuery width and height method
ال width() method تقوم باعادة تعيين عرض ال Element علي نافذة المتصفح او قراءة حجم العرض بال px بدون ال padding, border,margin
ال height() method تقوم باعادة تعيين طول ال Element علي نافذة المتصفح او قراءة حجم الطول بال px بدون ال padding, border,margin
$("#button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
</> jQuery width and height method
ال innerWidth() method تحصل من خلالها علي عرض ال Element يشمل حجم ال Padding
ال innerHeight() method تحصل من خلالها علي طول ال Element يشمل حجم ال Padding
$("#button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
</> jQuery outerWidth and outerHeight Methods
ال outerWidth() method تحصل من خلالها علي عرض ال Element يشمل حجم ال Paddingوال border
ال outerHeight() method تحصل من خلالها علي طول ال Element يشمل حجم ال Padding وال border
$("#button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
ال outerWidth(true) method تحصل من خلالها علي عرض ال Element يشمل حجم ال Paddingوال border وال margin
ال outerHeight(true) method تحصل من خلالها علي طول ال Element يشمل حجم ال Padding وال border وال margin
$("#button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعلم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة. نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي، لذا فإننا نركز على التعلم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن. هذه الخبرة ننقلها لك تحت إشراف مهندسين العباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
