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> ఎంపికల outer-width/height తిరిగి ఇస్తుంది:

ఉదాహరణ

$("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 Dimensions గురించి పూర్తి సూచనలు కోరుకుంటే, మా jQuery అడుగుల పరిశీలన హాండ్బుక్ నిలిచిపోండి.