jQuery အကျယ်အဝန်း

  • အရေးကြီးသော jQuery Dimensions အချက်အလက်အား ကိုးကာ ကျမ်းစားလို့ သင့် jQuery css()
  • နောက်ပိုင်း jQuery လေ့လာ

jQuery က အရာအုပ် နှင့် ဘရောက်ဆိုင် အပ်ပိုင်း အထိ အကျယ်အဝန်း ကို အင်အားကြီးစွာ နှင့် ပြုပြင်နိုင်သည်。

jQuery အကျယ်အဝန်း မီးရပ်

jQuery က အရာအုပ်၏ အကျယ်အဝန်း ကို အချက်ပြုရာတွင် အသုံးပြုနိုင်သော အချို့ အခြေခံ မီးရပ် များ ကို ပြန်လည်ပေးသည်:

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

jQuery width() နှင့် height() မီးရပ်

width() မီးရပ် က အရာအုပ်၏ အကျယ်အဝန်း (အတွင်းပြင်း မပါ) ကို အစားထိုးသဲ့ သို့မဟုတ် ပြန်လည်ပေးသည်。

height() မီးရပ် က အရာအုပ်၏ အထိပ်အဝန်း (အတွင်းပြင်း မပါ) ကို အစားထိုးသဲ့ သို့မဟုတ် ပြန်လည်ပေးသည်。

အောက်ပါ အကျိုးသတ်မှတ် အပြောအချက် က အမည်ဖြင့် သတ်မှတ်ထားသော <div> အရာအုပ်၏ အကျယ်အဝန်း/အထိပ်အဝန်း ကို ပြန်လည်ပေးသည်:

အကျိုးသတ္တု

$("button").click(function(){
  var txt="";
  txt += "အကျယ်အဝန်း: " + $("#div1").width() + "</br>";
  txt += "အထိပ်အဝန်း: " + $("#div1").height();
  $("#div1").html(txt);
});

ကိုယ်တိုင် ကြိုးစားကြား

jQuery innerWidth() နှင့် innerHeight() မီးရပ်

innerWidth() မီးရပ် က အရာအုပ်၏ အကျယ်အဝန်း (အတွင်းပြင်း) ကို ပြန်လည်ပေးသည်。

innerHeight() မီးရပ် က အရာအုပ်၏ အထိပ်အဝန်း (အတွင်းပြင်း) ကို ပြန်လည်ပေးသည်。

အောက်ပါ အကျိုးသတ်မှတ် အပြောအချက် က အမည်ဖြင့် သတ်မှတ်ထားသော <div> အရာအုပ်၏ inner-width/height ကို ပြန်လည်ပေးသည်:

အကျိုးသတ္တု

$("button").click(function(){
  var txt="";
  txt += "အတွင်းရှိ အကျယ်အဝန်း: " + $("#div1").innerWidth() + "</br>";
  txt += "အတွင်းရှိ အထိပ်အဝန်း: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

ကိုယ်တိုင် ကြိုးစားကြား

jQuery outerWidth() နှင့် outerHeight() မီးရွား

outerWidth() မီးရွား သည် အီအက်စ် အကျယ်အဝန်း (အတွင်းအရွယ်ပါ) ကို ကြည့်ရှုသည် (အဆက်သွယ်ပုံ ပါ)

outerHeight() မီးရွား သည် အီအက်စ် အကျယ်အဝန်း (အတွင်းအရွယ်ပါ) ကို ကြည့်ရှုသည် (အဆက်သွယ်ပုံ ပါ)

အောက်ပါ အကျိုးသတ္တု သည် သတ်မှတ်ထားသော <div> အီအက်စ် အကျယ်အဝန်း/အမြင့်အား ကို ကြိုးစားပြန်လိုက်သည်:

အကျိုးသတ္တု

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

ကိုယ်တိုင် ကြိုးစားကြား

outerWidth(true) မီးရွား သည် အီအက်စ် အကျယ်အဝန်း (အတွင်းအရွယ်ပါ) ကို ကြည့်ရှုသည် (အဆက်သွယ်ပုံ နှင့် အတွင်းအရွယ်ပါ)

outerHeight(true) မီးရွား သည် အီအက်စ် အကျယ်အဝန်း (အတွင်းအရွယ်ပါ) ကို ကြည့်ရှုသည် (အဆက်သွယ်ပုံ နှင့် အတွင်းအရွယ်ပါ)

အကျိုးသတ္တု

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

ကိုယ်တိုင် ကြိုးစားကြား

jQuery - ပိုမိုသော width() နှင့် height()

အောက်ပါ အကျိုးသတ္တု သည် အခမဲ့ တင်ထားသော စာသင်း (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);
});

ကိုယ်တိုင် ကြိုးစားကြား

အောက်ပါ အကျိုးသတ္တု သည် သတ်မှတ်ထားသော <div> အီအက်စ် အကျယ်အဝန်း နှင့် အမြင့်အား ကို တစ်ဆက်တည်းစွာ ကျပ်တင်လိုက်သည်:

အကျိုးသတ္တု

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

ကိုယ်တိုင် ကြိုးစားကြား

jQuery CSS ကိုးကာ လက်ထပ်ကျမ်းစားလို့ သင့်

jQuery CSS ကိုးကာ လက်ထပ်ကျမ်းစားလို့ သင့်

  • အရေးကြီးသော jQuery Dimensions အချက်အလက်အား ကိုးကာ ကျမ်းစားလို့ သင့် jQuery css()
  • နောက်ပိုင်း jQuery လေ့လာ