تنظیم ابعاد تگ

جی کوئری دارای چند متد مختلف برای کنترل ابعاد تگ ها است که لیست این متد ها را در زیر مشاهده می کنید

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

تصویر زیر به شما نشان خواهد داد که چگونه تعیین درست میزان ابعاد یک تگ، میتواند برروی تنظیمات ابعاد کل صفحه موثر باشد

متد Width()  عرض یک تگ را دریافت و یا تنظیم میکند (این عرض به استثناء padding ، border و margin است

متد Height() ارتفاع یک تگ رادریافت و یا تنظیم می کند (این  ارتفاع به استثناء padding، border و margin)

مثال زیر مقدار عرض و ارتفاع تگ DIV انتخاب شده را بازمیگرداند.

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

متد innerWidth() عرض یک تگ انتخاب شده را باز میگرداند (این عرض شامل padding هم میباشد.)

متد innerHeight() ارتفاع یک تگ انتخاب شده را باز می گرداند (این ارتفاع شامل padding میباشد.)

مثال زیر مقدار طول و عرض را همراه پدینگ برای تگ DIV  انتخاب شده باز می گرداند:

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

متد outerWidth()  عرض یک تگ را باز میگرداند (این عرض شامل Padding و border است.)

متد outerHeight() ارتفاع یک تگ را باز میگرداند(این ارتفاع شامل padding و border است. )

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

متد outerWidth(true) میزان عرض یک تگ را باز میگرداند (این عرض شامل Padding,border,margin است.)

متد outerHeight(true) میزان ارتفاع یک تگ را باز میگرداند (این ارتفاع شامل 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 و اندازه پنجره مرورگر را بازمیگرداند:

$("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);
});