ابعاد در jQuery


با jQuery به راحتی می توان با ابعاد عناصر و پنجره مرورگر کار کرد.

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

jQuery متد های مهمی برای کار با ابعاد دارد:
()width
()height
()innerWidth
()innerHeight
()outerWidth
()outerHeight

 


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

متد ()width عرض یک عنصر را تنظیم یا برمیگرداند(بدون احتساب padding،border و margin).
متد ()height ارتفاع یک عنصر را تنظیم یا برمیگرداند(بدون احتساب padding،border و margin).
مثال زیر عرض وارتفاع <div>  خاصی را برمیگرداند:
مثال :

 

متد های width و height
$("button").click(function(){
    var txt = "";
    txt += "Width: " + $("#div1").width() + "
"; txt += "Height: " + $("#div1").height(); $("#div1").html(txt); });
مشاهده مثال

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

متد ()innerWidth عرض یک عنصر را با احتساب padding برمیگرداند.
متد ()innerheight ارتفاع یک عنصر را با احتساب padding برمیگرداند.
مثال زیر عرض و ارتفاع عنصر <div> خاصی را برمیگرداند:
مثال :

 

متد های innerWidth و innerHeight
$("button").click(function(){
    var txt = "";
    txt += "Inner width: " + $("#div1").innerWidth() + "
"; txt += "Inner height: " + $("#div1").innerHeight(); $("#div1").html(txt); });
مشاهده مثال

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

متد ()outerWidth عرض یک عنصر را با احتساب padding و border برمیگرداند.
متد ()Outerheight ارتفاع یک عنصر را با احتساب padding و border برمیگرداند.
مثال زیر ارتفاع و عرض یک <div> مشخص را برمیگرداند:
مثال :

 

متد های outerWidth و outerHeight
$("button").click(function(){
    var txt = "";
    txt += "Outer width: " + $("#div1").outerWidth() + "
"; txt += "Outer height: " + $("#div1").outerHeight(); $("#div1").html(txt); });
مشاهده مثال

متد outerWidth(true) عرض یک عنصر را با احتساب padding،border و  margin برمیگرداند.
متد outerHeight(true) ارتفاع  یک عنصر را با احتساب padding،border و  margin برمیگرداند.
مثال :

 

متدهای outerWidth(true) و outerHeight(true)
$("button").click(function(){
    var txt = "";
    txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "
"; txt += "Outer height (+margin): " + $("#div1").outerHeight(true); $("#div1").html(txt); });
مشاهده مثال

کارایی بیشتر  ()width و ()height

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

 

مثالی از width و height
$("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> مشخص شده را تنظیم می کند:
مثال :

 

متد های width و height برای عناصری خاص
$("button").click(function(){
    $("#div1").width(500).height(500);
}); 
مشاهده مثال

 

 

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط