Kipimo cha jQuery

Kwa jQuery, itakatakuwa rahisi kusaidia kipimo cha elementi na kikaa cha kifungu cha mtandao.

Viwango vya kipimo za jQuery

jQuery inafikia viwango vingine vya muhimu vya kipimo:

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

Method za width() na height() za jQuery

Method ya width() inasaidia kuweka au kuona kipimo cha kina cha kina (kuna mibali na mifungo).

Method ya height() inasaidia kuweka au kuona kipimo cha kina cha kina (kuna mibali na mifungo).

Mifano hii inatoa kipimo cha ukubwa na kipimo cha kina cha <div> elelwa na kuchukua kwenye:

Mifano

$("button").click(function(){
  var txt="";
  txt+= "Ukubwa wa kina: " + $("#div1").width() + "</br>";
  txt+= "Kipimo cha kina: " + $("#div1").height();
  $("#div1").html(txt);
);

Jifunze tena

Method za innerWidth() na innerHeight() za jQuery

Method ya innerWidth() inatoa kipimo cha ukubwa cha kina (kuna mibali na mifungo).

Method ya innerHeight() inatoa kipimo cha ukubwa cha kina (kuna mibali na mifungo).

Mifano hii inatoa kipimo cha kikwetu/kikweti cha <div> elelwa na kuchukua kwenye:

Mifano

$("button").click(function(){
  var txt="";
  txt+= "Ukubwa wa kikwetu: " + $("#div1").innerWidth() + "</br>";
  txt+= "Kipimo cha kikwetu: " + $("#div1").innerHeight();
  $("#div1").html(txt);
);

Jifunze tena

Method za jQuery outerWidth() na outerHeight()

Method ya outerWidth() inatokana na kumwambia ukubwa wa kipengele (kuna ukweli, upengele na margesi).

Method ya outerHeight() inatokana na kumwambia ukubwa wa kipengele (kuna ukweli, upengele na margesi).

Mifano inayofanywa hapa inatokana na kukabidhi kiasi cha kipengele kina outer-width/height:

Mifano

$("button").click(function(){
  var txt="";
  txt+="Ukubwa wa kipengele kina: " + $("#div1").outerWidth() + "</br>";
  txt+="Ukubwa wa kipengele kina: " + $("#div1").outerHeight();
  $("#div1").html(txt);
);

Jifunze tena

Method ya outerWidth(true) inatokana na kumwambia ukubwa wa kipengele (kuna ukweli, upengele na margesi).

Method ya outerHeight(true) inatokana na kumwambia ukubwa wa kipengele (kuna ukweli, upengele na margesi).

Mifano

$("button").click(function(){
  var txt="";
  txt+="Ukubwa wa kipengele kina (+margesi): " + $("#div1").outerWidth(true) + "</br>";
  txt+="Ukubwa wa kipengele kina (+margesi): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
);

Jifunze tena

jQuery - Zaidi ya width() na height()

Mifano inayofanywa hapa inatokana na kukabidhi kiasi cha kipimo cha kipengele (HTML document) na kichakaza (browser viewport):

Mifano

$("button").click(function(){
  var txt="";
  txt+="Ukubwa wa Document/Ukubwa wa Document: " + $(document).width();
  txt+="x" + $(document).height() + "\n";
  txt+="Ukubwa wa Window/Ukubwa wa Window: " + $(window).width();
  txt+="x" + $(window).height();
  alert(txt);
);

Jifunze tena

Mifano inayofanywa hapa ni kumkinga kwa kumkinga kiasi cha kipimo cha kipengele <div> kikamilika:

Mifano

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

Jifunze tena

Kitabu cha Taarifa cha jQuery CSS

Kwa kuzingatia taarifa za upya kuhusu jQuery Dimensions, tazama kitabu chetu cha jQuery katika miadini ya ukuruka wa jQuery.