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> एलीमेंट के आंतरिक चौड़ाई/ऊंचाई को वापस करता है:

उदाहरण

$("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 आकार संदर्भ पुस्तिका को देखें。