jQuery获取元素填充/保证金

本文探讨如何使用 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中文网其他相关文章！