jQuery ਮਾਪ

jQuery ਰਾਹੀਂ, ਇਲੈਕਟ੍ਰੌਨਿਕ ਤੱਤ ਅਤੇ ਬਰਾਉਜ਼ਰ ਵਿੰਡੋ ਦੀ ਮਾਪ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਅਸਾਨੀ ਨਾਲ ਹੱਲ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ。

jQuery ਮਾਪ ਮਹਾਂਕਾਰ

jQuery ਵੱਲੋਂ ਕਈ ਮਹਾਂਕਾਰ ਮੁੱਖ ਤੌਰ 'ਤੇ ਮਾਪ ਪ੍ਰਕਿਰਿਆਵਾਂ ਮੁਹੱਈਆ ਕਰਵਾਉਂਦੇ ਹਨ:

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

jQuery width() ਅਤੇ height() ਮਹਾਂਕਾਰ

width() ਮਹਾਂਕਾਰ ਇਲੈਕਟ੍ਰੌਨਿਕ ਤੱਤ ਦੀ ਚੌੜਾਈ (ਅੰਦਰੂਨੀ ਪਾਦਰਿਆਂ, ਬੋਰਡਰ ਜਾਂ ਬਾਹਰੀ ਮਾਰਜਿਨ ਬਿਨਾ) ਸੈਟ ਕਰਦਾ ਜਾਂ ਵਾਪਸ ਦਿੰਦਾ ਹੈ。

height() ਮਹਾਂਕਾਰ ਇਲੈਕਟ੍ਰੌਨਿਕ ਤੱਤ ਦੀ ਉਚਾਈ (ਅੰਦਰੂਨੀ ਪਾਦਰਿਆਂ, ਬੋਰਡਰ ਜਾਂ ਬਾਹਰੀ ਮਾਰਜਿਨ ਬਿਨਾ) ਸੈਟ ਕਰਦਾ ਜਾਂ ਵਾਪਸ ਦਿੰਦਾ ਹੈ。

ਹੇਠਲੇ ਪ੍ਰਦਰਸ਼ਨ ਵਾਲਾ <div> ਇਲੈਕਟ੍ਰੌਨਿਕ ਤੱਤ ਦੀ ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ ਵਾਪਸ ਦਿੰਦਾ ਹੈ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

jQuery innerWidth() ਅਤੇ innerHeight() ਮਹਾਂਕਾਰ

innerWidth() ਮਹਾਂਕਾਰ ਇਲੈਕਟ੍ਰੌਨਿਕ ਤੱਤ ਦੀ ਚੌੜਾਈ (ਅੰਦਰੂਨੀ ਪਾਦਰਿਆਂ ਸਮੇਤ) ਵਾਪਸ ਦਿੰਦਾ ਹੈ。

innerHeight() ਮਹਾਂਕਾਰ ਇਲੈਕਟ੍ਰੌਨਿਕ ਤੱਤ ਦੀ ਉਚਾਈ (ਅੰਦਰੂਨੀ ਪਾਦਰਿਆਂ ਸਮੇਤ) ਵਾਪਸ ਦਿੰਦਾ ਹੈ。

ਹੇਠਲੇ ਪ੍ਰਦਰਸ਼ਨ ਵਾਲਾ <div> ਇਲੈਕਟ੍ਰੌਨਿਕ ਤੱਤ ਦਾ inner-width/height ਵਾਪਸ ਦਿੰਦਾ ਹੈ:

ਉਦਾਹਰਣ

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

ਆਪਣੇ ਅਨੁਭਵ ਕਰੋ

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(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 ਸੰਦਰਭ ਮੈਨੂਅਲ

ਜੇਕੁਈਰੀ ਡਾਇਮੈਂਸ਼ਨਸ ਦੀ ਪੂਰੀ ਸੰਦਰਭ ਲਈ ਸਾਡੇ ਜੇਕੁਈਰੀ ਡਾਇਮੈਂਸ਼ਨ ਸੰਦਰਭ ਮੈਨੂਅਲ ਦੀ ਸੁਣਵਾਈ ਕਰੋ。