ابعاد

از ویکی‌کد
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Jquery-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳شروع کار
۴دستور زبان
۵انتخابگرها (Selectors)
۶رویدادها
جلوه‌ها در jQuery
۱نمایش دادن / پنهان کردن
۲محو شدن
۳اسلاید
۴متحرک ساختن
۵stop()
۶فراخوانی (Callback)
۷زنجیره‌سازی (Chaining)
HTML در jQuery
۱Get
۲Set
۳اضافه‌کردن (Add)
۴حذف‌کردن
۵کلاس‌های CSS
۶css()
۷ابعاد
پیمودن در jQuery
۱پیمودن (Traversing)
۲اجداد
۳نسل‌ها
۴برادرها (Siblings)
۵فیلترکردن
AJAX در jQuery
۱مقدمهٔ AJAX
۲بارگذاری
۳Get/Post
متفرقه‌های jQuery
۱noConflict()
۲فیلترها
مثال‌ها
۱مثال‌ها
مرجع‌ها

به کمک jQuery، کار با ابعاد پنجره مرورگرها و عنصرها آسان است.[۱]

متدهای ابعاد در jQuery

jQuery متدهای مهمی برای کار با ابعاد دارد:

  • width()
  • height()
  • innerWidth()
  • innerHeight()
  • outerWidth()
  • outerHeight()

ابعاد در jQuery

متدهای width() و height() در jQuery

متد width() عرض یک عنصر را تنظیم می‌کند یا برمی‌گرداند (به استثناء حاشیه داخلی (به انگلیسی: padding)، کادربندی و حاشیه (به انگلیسی: margin)).

متد height() ارتفاع یک عنصر را تنظیم می‌کند یا برمی‌گرداند (به استثناء حاشیه داخلی، کادربندی و حاشیه).

مثال زیر عرض و ارتفاع یک عنصر <div> مشخص شده را برمی‌گرداند:

مثال
1 $("button").click(function(){
2   var txt = "";
3   txt += "Width: " + $("#div1").width() + "</br>";
4   txt += "Height: " + $("#div1").height();
5   $("#div1").html(txt);
6 });

متدهای innerWidth() و innerHeight() در jQuery

متد innerWidth() عرض یک عنصر (شامل حاشیه درونی) را برمی‌گرداند.

متد innerHeight() ارتفاع یک عنصر را (شامل حاشیه درونی) برمی‌گرداند.

مثال زیر ارتفاع / عرض - درونی عنصر <div> مشخص شده را برمی‌گرداند:

مثال
1 $("button").click(function(){
2   var txt = "";
3   txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
4   txt += "Inner height: " + $("#div1").innerHeight();
5   $("#div1").html(txt);
6 });

متدهای outerWidth() و outerHeight() در jQuery

متد outerWidth() عرض یک عنصر را (شامل حاشیه درونی و کادربندی) برمی‌گرداند.

متد outerHeight() ارتفاع یک عنصر را (شامل حاشیه درونی و کادربندی) برمی‌گرداند.

مثال زیر عرض/ ارتفاع - خارجی یک عنصر <div> مشخص شده را برمی‌گرداند:

مثال
1 $("button").click(function(){
2   var txt = "";
3   txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
4   txt += "Outer height: " + $("#div1").outerHeight();
5   $("#div1").html(txt);
6 });

متد outerWidth(true) عرض یک عنصر (شامل حاشیه درونی، کادربندی و حاشیه (به انگلیسی: margin)) را برمی‌گرداند.

متد outerHeight(true) ارتفاع یک عنصر (شامل حاشیه درونی، کادربندی و حاشیه) را برمی‌گرداند.

مثال
1 $("button").click(function(){
2   var txt = "";
3   txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
4   txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
5   $("#div1").html(txt);
6 });

width() و height() بیشتر در jQuery

مثال زیر عرض و ارتفاع سند (سند HTML) و پنجره (viewport مرورگر) را برمی‌گرداند:

مثال
1 $("button").click(function(){
2   var txt = "";
3   txt += "Document width/height: " + $(document).width();
4   txt += "x" + $(document).height() + "\n";
5   txt += "Window width/height: " + $(window).width();
6   txt += "x" + $(window).height();
7   alert(txt);
8 });

مثال زیر عرض و ارتفاع یک عنصر <div> مشخص شده تنظیم می‌کند:

مثال
1 $("button").click(function(){
2   $("#div1").width(500).height(500);
3 });

تمرین‌های jQuery

مرجع jQuery CSS

برای مرور کامل همه متدهای jQuery HTML، لطفاً به مرجع جی کوئری HTML/CSS مراجعه کنید.


منابع آموزشی