width နည်းလမ်း

width နည်းလမ်းသည် element ၏ အနံကို ရယူခြင်းနှင့် ပြောင်းလဲခြင်းတို့ကို ခွင့်ပြုပေးသည်။ ကျွန်ုပ်တို့ ရရှိမည့်အရာသည် 'တွက်ချက်ထားသော အနံတန်ဖိုး' (computed width) ဖြစ်သည်ကို မှတ်သားရန် အရေးကြီးသည်။ css('width') နည်းလမ်းနှင့် မတူဘဲ၊ ၎င်းသည် အတိုင်းအတာမဲ့ အရေအတွက်ကို ပြန်ပေးသည် (ဥပမာ 400) နှင့် သင်္ချာတွက်ချက်မှုများတွင် အဆင်ပြေစေသည်။ ဤနည်းလမ်းသည် element ၏ အကြောင်းအရာ အနံကို CSS property box-sizing ကို သတ်မှတ်ခြင်း ရှိမရှိမဆိုင်ဘဲ ရယူသည်။ ၎င်းနှင့်ဆက်စပ်သော အဆင်မပြေမှုများကို ရှောင်ရှားရန် css('width') ကို အသုံးပြုရန် အကြံပြုထားသည်။ အသုံးပြုသူက စာမျက်နှာအရွယ်အစားကို ပြောင်းလဲသည့်အခါ၊ သို့မဟုတ် element သို့မဟုတ် ၎င်း၏ မိဘ element ကို ဝှက်ထားသည့်အခါတွင်လည်း တွက်ချက်မှုအမှားများ ဖြစ်ပေါ်နိုင်သည်။ အနံတန်ဖိုးသည် padding နှင့် border တန်ဖိုးများကို ထည့်သွင်းတွက်ချက်ခြင်း မရှိပါ။

ရေးထုံး

Element ၏ အနံကို ရယူပါ။ တစ်ခါတစ်ရံတွင် ရရှိသောတန်ဖိုးများသည် ဒသမကိန်းများ ဖြစ်နိုင်သည်။

javascript$(selector).width();

Element ၏ အနံကို ပြောင်းလဲရန် - ကိန်းတစ်ခုကို (ဥပမာ 400) ပေးပို့နိုင်သည်၊ ထိုအခါ တိုင်းတာမှု ယူနစ်မှာ ပစ်ဆယ်များ ဖြစ်လိမ့်မည်၊ သို့မဟုတ် စာကြောင်း၊ တိုင်းတာမှု ယူနစ်ကို ဖော်ပြထားသည့် (ဥပမာ '10em') ကို ပေးပို့နိုင်သည်။

javascript$(selector).width(အသစ်တန်ဖိုး);

ကျွန်ုပ်တို့သည် သတ်မှတ်ထားသော function တစ်ခုကို ရွေးချယ်မှုအုပ်စုရှိ element တစ်ခုစီအတွက် အသုံးချနိုင်သည်။ ဤသို့ပြုလုပ်ရာတွင် function သည် ပထမ parameter အဖြစ် အုပ်စုအတွင်းရှိ element ၏ အစဉ်နံပါတ်ကို လက်ခံရရှိမည်ဖြစ်ပြီး၊ ဒုတိယ parameter အဖြစ် - element တစ်ခုချင်းစီအတွက် သတ်မှတ်ထားသော အနံ၏ လက်ရှိတန်ဖိုးကို လက်ခံရရှိမည်။ this တန်ဖိုးသည် function အတွင်း၌ လက်ရှိ element ကို ညွှန်ပြနေမည်။ Element ၏ အနံတန်ဖိုးသည် function မှ ပြန်ပေးသော တန်ဖိုးသို့ ပြောင်းလဲသွားမည်ဖြစ်သည်။

javascript$(selector).width(function(အုပ်စုအတွင်းရှိ အစဉ်နံပါတ်, အနံ၏ လက်ရှိတန်ဖိုး));

ဥပမာ

div ကို နှိပ်လိုက်သည့်အခါ ၎င်း၏ အနံကို 40px တန်ဖိုးသို့ width နည်းလမ်းကို အသုံးပြု၍ ပြောင်းလဲကြည့်ပါ၊ ပြီးနောက် css ကို အသုံးပြု၍ ၎င်း၏ နောက်ခံကို အစိမ်းရောင်သို့ ပြောင်းလဲကြည့်ပါ။

html<div id="test"></div>

css#test {
  width: 90px; 
  height: 80px;
  background: red; 
  color: white;
  margin-top: 10px; 
  cursor: pointer;
}

javascript$('#test').one('click', function() {
  $(this).width(40).css({
    cursor: 'auto',
    backgroundColor: 'green'
  });
});

ဒါတွေလဲ ကြည့်ပါ