height လုပ်ဆောင်ချက်

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

Syntax

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

javascript$(selector).height();

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

javascript$(selector).height(New Value);

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

အစိတ်အပိုင်း၏ အမြင့်တန်ဖိုးသည် function မှ ပြန်လာသော တန်ဖိုး အဖြစ်သို့ ပြောင်းလဲသွားမည် ဖြစ်သည်။

javascript$(selector).height(function(index, currentHeight));

ဥပမာ

အခု #test ပေါ်တွင် ကလစ်နှိပ်လိုက်သည့်အခါ ၎င်း၏ အမြင့်ကို 30px တန်ဖိုးသို့ ပြောင်းလဲရန် height လုပ်ဆောင်ချက်ကို အသုံးပြုကြည့်ပါ၊ ပြီးလျှင် css ကို အသုံးပြု၍ ၎င်း၏ နောက်ခံအရောင်ကို အစိမ်းရောင်သို့ ပြောင်းလဲပါမည်။

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

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

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

ဆက်လက် လေ့လာရန်