jQuery – HTML DOM উপদান/element এর আয়তন (প্রস্থ, উচ্চতা )

Query এর আয়তন নিয়ে কাজ করার জন্য বেশ কিছু গুরুত্বপূর্ণ মেথড আছে:

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

 

Query আয়তন

 

jQuery এর width() এবং height() মেথড

width() মেথড একটি এলিমেন্ট এর প্রসস্থতা সেট করে বা ফেরত দেয় (প্যাডিং, সীমানা, বা মার্জিন সহ)।

height() মেথড একটি এলিমেন্ট এর উচ্চতা সেট করে বা ফেরত দেয় (প্যাডিং, সীমানা, বা মার্জিন সহ)।

নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর প্রস্থ এবং উচ্চতা দেখানো হলঃ


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

ফলাফল : width() এবং height()

 

jQuery এর innerWidth () এবং innerHeight () পদ্ধতি

InnerWidth () মেথড একটি এলিমেন্ট এর এর মান (প্যাডিং সহ) ফেরত দেয়/প্রদান করে।

InnerHeight () মেথড একটি এর উচ্চতা এর মান (প্যাডিং সহ) ফেরত দেয়/প্রদান করে।

নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর ভেতরের প্রস্থ / উচ্চতা দেখানো হল:


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

ফলাফল : innerWidth () এবং innerHeight ()

 

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 () এবং outerHeight ()

 

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);
});

ফলাফল : outerWidth(true) মেথড এবং outerHeight(true) মেথড

 

jQuery এর আরো 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);
});

ফলাফল : width() এবং height()

 

নিম্নলিখিত উদাহরণে একটি নির্দিষ্ট <div> এলিমেন্ট এর প্রস্থ ও উচ্চতা দেখানো হল:


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

ফলাফল : প্রস্থ ও উচ্চতা

Permanent link to this article: http://bangla.sitestree.com/jquery-html-dom-%e0%a6%89%e0%a6%aa%e0%a6%a6%e0%a6%be%e0%a6%a8element-%e0%a6%8f%e0%a6%b0-%e0%a6%86%e0%a7%9f%e0%a6%a4%e0%a6%a8-%e0%a6%aa%e0%a7%8d%e0%a6%b0%e0%a6%b8%e0%a7%8d%e0%a6%a5-%e0%a6%89/