亚洲区国产区激情区无码区,国产成人mv视频在线观看,国产A毛片AAAAAA,亚洲精品国产首次亮相在线

jQuery 尺寸

使用jQuery，可以輕松處理元素和瀏覽器窗口的尺寸。

jQuery提供了有效地操作元素尺寸的方法。

在本章中，我們將解釋如何獲取或設(shè)置HTML元素的尺寸。

jQuery尺寸方法

我們具有以下用于處理尺寸的jQuery方法：

下面將向您展示如何使用每種方法。

了解jQuery尺寸

請查看下圖，以了解這些方法如何計算元素框的尺寸。

jQuery尺寸

jQuery width()和height()方法

jQuery width()方法獲取或設(shè)置所選元素的寬度（不包括內(nèi)邊距，邊框和外邊距）。

jQuery height()方法獲取或設(shè)置所選元素的高度（不包括內(nèi)邊距，邊框和外邊距）。

下面的示例獲取DIV元素的寬度和高度：

$("div").click(function(){
  let w = $(this).width();
  let h = $(this).height();
  $(this).html("DIV的寬度: " + w + "<br>" + "DIV的高度: " + h);
});
測試看看?/?

下面的示例設(shè)置所有段落的寬度和高度：

$("button").click(function(){
  $("p").width(250);
  $("p").height(100);
});
測試看看?/?

jQuery innerWidth()和innerHeight()方法

jQuery innerWidth()方法獲取或設(shè)置所選元素的寬度（包括內(nèi)邊距）。

jQuery innerHeight()方法獲取或設(shè)置所選元素的高度（包括內(nèi)邊距）。

下面的示例獲取DIV元素的內(nèi)部寬度和內(nèi)部高度：

$("div").click(function(){
  let w = $(this).innerWidth();
  let h = $(this).innerHeight();
  $(this).html("Inner 寬度: " + w + "<br>" + "Inner 高度: " + h);
});
測試看看?/?

jQuery externalWidth()和outsideHeight()方法

jQuery outerWidth()方法獲取或設(shè)置所選元素的寬度（包括內(nèi)邊距和邊框）。

jQuery outerHeight()方法獲取或設(shè)置所選元素的高度（包括內(nèi)邊距和邊框）。

以下示例獲取DIV元素的外部寬度和外部高度：

$("div").click(function(){
  let w = $(this).outerWidth();
  let h = $(this).outerHeight();
  $(this).html("Outer 寬度: " + w + "<br>" + "Outer 高度: " + h);
});
測試看看?/?

outerWidth(true) 方法獲取或設(shè)置所選元素的寬度（包括內(nèi)邊距，邊框和外邊距）。

outerHeight(true) 該方法獲取或設(shè)置所選元素的高度（包括內(nèi)邊距，邊框和外邊距）。

以下示例獲取DIV元素的外部寬度和外部高度（包括邊距）：

$("div").click(function(){
  let w = $(this).outerWidth(true);
  let h = $(this).outerHeight(true);
  $(this).html("Outer 寬度[+margin]:" + w + "<br>" + "Outer 高度[+margin]: " + h);
});
測試看看?/?

更多示例

顯示width()，height()，innerWidth()，innerHeight()，outerWidth()和outerHeight()之間的差異：

$("button").click(function(){
  $("div").width();
  $("div").innerWidth();
  $("div").outerWidth();
  $("div").height();
  $("div").innerHeight();
  $("div").outerHeight();
});
測試看看?/?

還可以找到窗口和文檔的寬度和高度：

$(window).width();// 返回瀏覽器窗口的寬度
$(document).width();  // 返回HTML文檔的寬度

$(window).height();// 返回瀏覽器窗口的高度
$(document).height();  // 返回HTML文檔的高度
測試看看?/?

jQuery CSS參考

有關(guān)完整的CSS方法參考，請訪問我們的jQuery HTML / CSS參考。