jQuery sukat

Sa pamamagitan ng jQuery, madaling maghawak ng sukat ng elemento at window na browser.

Mga jQuery sukat method

Ang jQuery ay nagbibigay ng maraming mahalagang method sa paghawak ng sukat:

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

Mga jQuery width() at height() method

Ang width() method ay nagtatakda o ibabalik ang lapad ng elemento (hindi kasama padding, border o margin).

Ang height() method ay nagtatakda o ibabalik ang taas ng elemento (hindi kasama padding, border o margin).

Mga halimbawa na ibabalik ng ito ang tinukoy na <div> element na lapad at taas:

實例

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

親自試一試

Mga jQuery innerWidth() at innerHeight() method

Ang innerWidth() method ay ibabalik ang lapad ng elemento (kasama ang padding).

Ang innerHeight() method ay ibabalik ang taas ng elemento (kasama ang padding).

Mga halimbawa na ibabalik ng ito ang tinukoy na <div> element na 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> 元素的 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 尺寸參考手冊。