jQuery獲取元素填充/保證金-js教程-PHP中文網

jQuery get element padding/margin

本文探討如何使用 jQuery 獲取和設置 DOM 元素的內邊距和外邊距值，特別是元素外邊距和內邊距的具體位置。雖然可以使用 CSS 設置元素的內邊距和外邊距，但獲取準確的值可能會比較棘手。

// 设置
$("div.header").css("margin","10px");
$("div.header").css("padding","10px");

登入後複製

你可能會認為這段代碼很簡單，但實際效果並非如此。

// 获取
$("div.header").css("margin");
$("div.header").css("padding");

登入後複製

自己嘗試一下（將以下代碼粘貼到 Firebug 中）。你會發現返回的 margin 和 padding 值為空。

(function($){

function logMarginPadding(elem) {
  // 获取
  var margin = elem.css("margin"),
      padding = elem.css("padding");
  console.log("margin="+margin+" padding="+padding);
}

var elem = $("div.header"); // 设置要检查的元素

logMarginPadding(elem);
// 设置
elem.css("margin","10px");
elem.css("padding","10px");
logMarginPadding(elem);

})(jQuery);

登入後複製

這段代碼似乎有效。

// 获取元素的顶部外边距
alert($("div.header").css("margin-top"));

// 获取元素的顶部外边距（整数）
alert($("a").css("margin-top").replace("px", ""));

// 如果与计算一起使用，则必须将其转换为整数
parseInt($("a").css('padding-left').replace("px", ""));

登入後複製

總之，這就是我獲取元素內邊距的方法。這種方法並不理想，而且僅在內邊距均勻（每側相同）的情況下才有效。只需獲取寬度和外寬度，然後除以 2 即可。

var item = $('div.header');
width = item.width(),
padding = (item.outerWidth()-width)/2;

登入後複製

一個名為 jsizes 的流行插件可能是獲取/設置元素內邊距/外邊距值的良好解決方案。 JSizes 是 jQuery JavaScript 庫的一個小型插件，它增加了對查詢和設置 CSS min-width、min-height、max-width、max-height、border-*-width、margin 和 padding 屬性的支持。

進一步閱讀

jQuery 具有 outerWidth 和 outerHeight 函數，默認情況下包含邊框和內邊距，如果函數的第一個參數為 true，則還包含外邊距。 https://www.php.cn/link/25e828afe5f637410a84442d27029c38 https://www.php.cn/link/a47ad724599e11d59272b02d08d0dbd7

jQuery 元素內邊距/外邊距常見問題解答 (FAQ)

如何使用 jQuery 獲取元素的內邊距？

可以使用 jQuery 的 css() 方法獲取元素的內邊距。此方法返回計算出的樣式屬性值。例如，要獲取 div 元素的內邊距，可以使用以下代碼：

var padding = $("div").css("padding");

登入後複製

這將以像素為單位返回 div 元素的內邊距值。

如何使用 jQuery 設置元素的外邊距？

可以使用 jQuery 的 css() 方法設置元素的外邊距。此方法設置所選元素的一個或多個樣式屬性。以下是如何設置 div 元素外邊距的示例：

$("div").css("margin", "20px");

登入後複製

這將把 div 元素的外邊距設置為 20 像素。

jQuery 中 `outerWidth()` 和 `outerHeight()` 的區別是什麼？

jQuery 中的 outerWidth() 方法返回元素的寬度，包括內邊距和邊框。如果可選參數設置為 true，則還包括外邊距。另一方面，outerHeight() 方法返回元素的高度，包括內邊距和邊框。如果可選參數設置為 true，則還包括外邊距。

如何使用 jQuery 獲取元素的尺寸？

jQuery 提供了幾種方法來獲取元素的尺寸。這些方法包括 width()、height()、innerWidth()、innerHeight()、outerWidth() 和 outerHeight()。每種方法都返回所選元素的相應尺寸。

如何使用 jQuery 更改元素的尺寸？

可以使用 width()、height()、innerWidth()、innerHeight()、outerWidth() 和 outerHeight() 方法在 jQuery 中更改元素的尺寸。這些方法不僅返回所選元素的相應尺寸，而且在傳遞值作為參數時還可以設置新的尺寸。

jQuery 中 `innerWidth()` 和 `outerWidth()` 的區別是什麼？

jQuery 中的 innerWidth() 方法返回元素的寬度，包括內邊距但不包括邊框或外邊距。另一方面，outerWidth() 方法返回元素的寬度，包括內邊距和邊框。如果可選參數設置為 true，則還包括外邊距。

如何使用 jQuery 獲取元素的邊框寬度？

jQuery 沒有直接的方法來獲取元素的邊框寬度。但是，可以使用 css() 方法獲取計算出的樣式屬性值，包括邊框寬度。例如：

// 设置
$("div.header").css("margin","10px");
$("div.header").css("padding","10px");

登入後複製

這將以像素為單位返回 div 元素的邊框寬度。

如何同時使用 jQuery 設置元素的內邊距和外邊距？

可以使用 jQuery 的 css() 方法同時設置元素的內邊距和外邊距。例如：

// 获取
$("div.header").css("margin");
$("div.header").css("padding");

登入後複製

這將分別將 div 元素的內邊距和外邊距設置為 10 像素和 20 像素。

如何使用 jQuery 獲取元素的外邊距？

可以使用 jQuery 的 css() 方法獲取元素的外邊距。此方法返回計算出的樣式屬性值。例如，要獲取 div 元素的外邊距，可以使用以下代碼：

(function($){

function logMarginPadding(elem) {
  // 获取
  var margin = elem.css("margin"),
      padding = elem.css("padding");
  console.log("margin="+margin+" padding="+padding);
}

var elem = $("div.header"); // 设置要检查的元素

logMarginPadding(elem);
// 设置
elem.css("margin","10px");
elem.css("padding","10px");
logMarginPadding(elem);

})(jQuery);

登入後複製

這將以像素為單位返回 div 元素的外邊距值。

如何使用 jQuery 設置元素的邊框寬度？

可以使用 jQuery 的 css() 方法設置元素的邊框寬度。此方法設置所選元素的一個或多個樣式屬性。以下是如何設置 div 元素邊框寬度的示例：

// 获取元素的顶部外边距
alert($("div.header").css("margin-top"));

// 获取元素的顶部外边距（整数）
alert($("a").css("margin-top").replace("px", ""));

// 如果与计算一起使用，则必须将其转换为整数
parseInt($("a").css('padding-left').replace("px", ""));

登入後複製

這將把 div 元素的邊框寬度設置為 2 像素。

以上是jQuery獲取元素填充/保證金的詳細內容。更多資訊請關注PHP中文網其他相關文章！