میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

استایل و ابعاد در جی کوئری

۷۲ / ۱۰۰

سلام به شما همراهان و دوستان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی به دوره ی آموزش jQuery (جی کوئری) خوش آمدید. در این دوره قصد داریم شما را با استایل و ابعاد در جی کوئری jQuery آشنا کرده نحوه استفاده از آن را به شما آموزش دهیم پس با من همراه باشید.

 


متد css در جی کوئری

متد css در جی کوئری می تواند ویژگی های استایل عناصر را تنظیم کند یا به ما برگرداند.

برگرداندن یک ویژگی css در جی کوئری

برای برگرداندن مقدار داخل یک ویژگی css از ساختار زیر استفاده می کنیم.

css("propertyname");

در این ساختار ابتدا متد css را می نویسیم و سپس در پرانتز جلوی آن، نام ویژگی ای که می خواهیم مقدار آن را دریافت کنیم، می نویسیم.

نمونه زیر مقدار رنگ پس زمینه عنصر p را به ما نشان می دهد.

$("p").css("background-color");

به یاد داشته باشید که متد css هنگام بازگرداندن مقدار، مقدار اولین عنصری را که پیدا می کند، بازمی گرداند. یعنی اگر ما ۱۰ پاراگراف با رنگ های پس زمینه مختلف داشته باشیم. کد بالا رنگ اولین پاراگراف را برای ما مشخص می کند.


تنظیم مقدار برای یک ویژگی css

برای تنظیم یک مقدار مشخص برای یک ویژگی در css از ساختار زیر استفاده می کنیم:

css("propertyname","value");

ابتدا نام ویژگی مورد نظر را می نویسیم و سپس با یک “،” مقدار مورد نظر را از آن جدا می کنیم.

در کد زیر با استفاده از متد css رنگ پس زمینه تمام عناصر p را به زرد تغییر داده ایم:

$("p").css("background-color", "yellow");

تنظیم چندین ویژگی css برای یک عنصر

برای تنظیم چند ویژگی css برای یک عنصر از ساختار زیر استفاده می کنیم:

بدین صورت که ابتدا متد css را می نویسیم و سپس درون آن یک “}” باز می کنیم، property name و مقدار مورد نظر را درون دابل کوتیشن می نویسیم و در نهایت آنها را با “،” از هم جدا می کنیم.

css({"propertyname":"value","propertyname":"value",...});

در مثال زیر ویژگی های پس زمینه و اندازه فونت عناصر p صفحه به زرد و ۲۰۰% تغییر می کند:

$("p").css({"background-color": "yellow", "font-size": "۲۰۰%"});

تنظیم ابعاد در جی کوئری

با استفاده از جی کوئری به راحتی می توان ابعاد عناصر و پنجره مرورگر را تنظیم کرد یا مقادیر آن را دریافت کرد. برای کار با ابعاد در جی کوئری ۶ متد زیر وجود دارد:

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

برای آشنایی بیشتر با این ۶ متد به تصویر زیر نگاه کنید. در ادامه نیز تک تک متدها را بررسی خواهیم کرد.

jquery Dimensions

 


متد widthو height در جی کوئری

متد width عرض یک عنصر بدون در نظر گرفتن padding ،border و margin آن را محاسبه می کند، بازمی گرداند و یا تنظیم می کند.

متد height ارتفاع یک عنصر را بدون احتساب padding ،border و margin آن را محاسبه می کند، بازمی گرداند و یا تنظیم می کند.

در مثال زیر می بینیم که با کلیک بر روی دکمه، عرض و ارتفاع عنصر بدون احتساب padding ،border و margin به صورت رشته ای دریافت می شود و سپس به کاربر نمایش داده می شود.

$("button").click(function(){
  var txt = "";
  txt += "Width: " + $("#div1").width() + "</br>";
  txt += "Height: " + $("#div1").height();
  $("#div1").html(txt);
});

متدهای innerWidth و innerHeight در جی کوئری

متد innerWidth در جی کوئری ، عرض عنصر به اضافه ی padding آن را برمی گرداند و متد innerHeight در جی کوئری، ارتفاع عنصر شامل padding آن را به ما برمی گرداند.

در کد زیر با کلیک بر روی دکمه تابعی اجرا می شود که در آن innerHeight و innerWidth عنصر مورد نظر مشخص می گردد و سپس به کاربر نمایش داده می شود.

$("button").click(function(){
  var txt = "";
  txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
  txt += "Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

متدهای outerWidth و outerHeight در جی کوئری

متد outerWidth مقدار عرض عنصر شامل padding و border آن را برای ما محاسبه می کند و متد outerHeight مقدار ارتفاع عنصر شامل padding و border آن را برای ما محاسبه می کند.

در نمونه زیر مانند نمونه های قبلی مقدار outerWidth و outerHeight عنصر را دریافت کرده ایم و سپس به کاربر نمایش داده ایم.

$("button").click(function(){
  var txt = "";
  txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
  txt += "Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

نکته مهم: اگر در پرانتز جلوی متدهای outerWidth و outerHeight مقدار true را قرار دهیم، آنها علاوه بر padding و border و margin های عنصر را نیز محاسبه می کنند و جزئی از عرض و ارتفاع به ما برمی گردانند.

مانند نمونه زیر که در آن 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);
});

ارتفاع و عرض پنجره مرورگر و سند html

با استفاده از متدهای width و height شما علاوه بر امکان تنظیم یا بازگردانی ارتفاع و عرض عناصر می توانید ارتفاع و عرض پنجره مرورگر و سند html خود را نیز برگردانید و مشخص کنید.

در نمونه زیر ما ارتفاع و عرض سند html جاری و سپس پنجره مرورگر خود را به صورت alert به کاربر نمایش می دهیم.

$("button").click(function(){
  var txt = "";
  txt += "Document width/height: " + $(document).width();
  txt += "x" + $(document).height() + "\n";
  txt += "Window width/height: " + $(window).width();
  txt += "x" + $(window).height();
  alert(txt);
});

برای نتظیم مقدار عرض و ارتفاع برای عنصر، مقدار مورد نظر را در پرانتز جلوی متدهای width و height می نویسیم. مانند نمونه ی زیر:

$("button").click(function(){
  $("#div1").width(500).height(500);
});

امیدواریم آموزش استایل و ابعاد در جی کوئری jQuery نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با jQuery را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟