با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش jQuery ، را دنبال می کنند. در بخش های اخیر ، با نحوه ی دستیابی و دستکاری صفات و ویژگی های css ، آشنا شدیم. در این بخش قصد داریم به مبحث دستکاری اندازه و ابعاد عناصر html در jQuery یا dimensions در jQuery ، بپردازیم.
اگر در جریان روال آموزشهای این دوره باشید. چند جلسه ی اخیر را به مباحث چگونگی دستیابی و دستکاری ویژگی ها و خواص css ، در jQuery ، پرداختیم. و در همین راستا، به ارائه موضوعات کار با محتوا و ویژگی های CSS در jQuery و در ادامه آن موضوع آشنایی با تابع ()css در jQuery ، پرداختیم.
در ادامه ی این بخش، مطالب آموزش دستکاری اندازه و ابعاد عناصر html یا dimensions در jQuery ، را ارائه داده ایم.
در جی کوئری، دستکاری ابعاد عناصر و پنجره مرورگر آسان است.
jQuery ، توابعی ر ابرای ایجاد امکان دستکاری ابعاد و اندازه های عناصر html ، معرفی کرده است:
تابع ()width ، برای دسترسی و تنظیم مقدار عرض (width) ، عناصر html معرفی شده است.(ویژگی های padding, border و margin را در نظر نمی گیرد).
تابع ()height ، نیز برای دسترسی و تنظیم مقدار ارتفاع (height) ، عناصر html معرفی شده است.(ویژگی های padding, border و margin را در نظر نمی گیرد).
مثال زیر چگونگی دریافت مقادیر عرض و ارتفاع عنصر <div>
، را مشخص می کند:
1 2 3 4 5 6 | $("button").click(function(){ var txt = ""; txt += "Width: " + $("#div1").width() + "</br>"; txt += "Height: " + $("#div1").height(); $("#div1").html(txt); }); |
تابع ()innerWidth ، برای دسترسی و تنظیم مقدار عرض (width) ، عناصر html معرفی شده است.(ویژگی padding را در نظر می گیرد).
تابع ()innerHeight ، برای دسترسی و تنظیم مقدار ارتفاع (height) ، عناصر html معرفی شده است.(ویژگی padding را در نظر می گیرد).
مثال زیر دسترسی به مقادیر عرض و ارتفاع عنصر <div>
، را با استفاده از دو تابع فوق، نشان می دهد:
1 2 3 4 5 6 | $("button").click(function(){ var txt = ""; txt += "Inner width: " + $("#div1").innerWidth() + "</br>"; txt += "Inner height: " + $("#div1").innerHeight(); $("#div1").html(txt); }); |
تابع ()outerWidth ، برای دسترسی و تنظیم مقدار عرض (width) ، عناصر html معرفی شده است.(ویژگی های padding و border را در نظر می گیرد).
تابع ()outerHeight ، برای دسترسی و تنظیم مقدار ارتفاع (height) ، عناصر html معرفی شده است.(ویژگی های padding و border را در نظر می گیرد).
مثال زیر بخوبی استفاده از توابع ()outerWidth و ()outerHeight ، را برای دریافت مقادیر عرض و ارتفاع عنصر <div>
، نشان می دهد:
1 2 3 4 5 6 | $("button").click(function(){ var txt = ""; txt += "Outer width: " + $("#div1").outerWidth() + "</br>"; txt += "Outer height: " + $("#div1").outerHeight(); $("#div1").html(txt); }); |
نکته:
تابع (true)outerWidth ، برای دسترسی و تنظیم مقدار عرض (width) ، عناصر html معرفی شده است.(ویژگی های padding و border و margin را در نظر می گیرد).
تابع (true)outerHeight ، برای دسترسی و تنظیم مقدار ارتفاع (height) ، عناصر html معرفی شده است.(ویژگی های padding و border و margin را در نظر می گیرد).
1 2 3 4 5 6 | $("button").click(function(){ var txt = ""; txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>"; txt += "Outer height (+margin): " + $("#div1").outerHeight(true); $("#div1").html(txt); }); |
مثال: این مثال، چگونگی برگرداندن عرض و ارتفاع عناصر html و پنجره مرورگر را نشان می دهد:
1 2 3 4 5 6 7 8 | $("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); }); |
مثال۲: این مثال تنظیم عرض و ارتفاع عنصر <div>
، را نشان می دهد:
1 2 3 | $("button").click(function(){ $("#div1").width(500).height(500); }); |
در بخشهای اخیر این فصل ، با چگونگی دستیابی به کدهای css ، و توابعی که در این زمینه معرفی شده اند. آشنا شدیم. در ادامه این مباحث در این بخش به موضوع دستکاری اندازه و ابعاد عناصر html یا dimensions در jQuery ، پرداختیم. امیدواریم که این مباحث، مورد توجه و استفاده ی شما قرار گرفته باشد.