jQuery obtient un rembourrage / marge d'élément

Cet article explique comment utiliser jQuery pour obtenir et définir les valeurs de marge et de marge intérieures des éléments DOM, en particulier les emplacements spécifiques de la marge extérieure et des marges intérieures de l'élément. Bien qu'il soit possible de définir les marges intérieures et extérieures d'un élément à l'aide de CSS, l'obtention de valeurs précises peut être délicate.

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

Vous pourriez penser que ce code est simple, mais cela ne fonctionne pas.

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

Essayez-le vous-même (collez le code suivant dans Firebug). Vous constaterez que les valeurs de marge et de rembourrage retournées sont vides.

(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);

Ce code semble fonctionner.

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

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

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

Quoi qu'il en soit, c'est ainsi que j'obtiens les marges à l'intérieur de l'élément. Cette approche n'est pas idéale et ne fonctionne que si les marges intérieures sont uniformes (les mêmes de chaque côté). Obtenez simplement la largeur et la largeur extérieure et divisez par 2.

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

Un plugin populaire appelé JSizes pourrait être une bonne solution pour obtenir / définir les valeurs de marge intérieure / extérieure de l'élément. JSizes est un petit plugin pour la bibliothèque JavaScript jQuery qui ajoute la prise en charge de la requête et du réglage CSS min-width, min-height, max-width, max-height, border-*-width, margin, padding,

,

, , et .

outerWidth lecture complémentaire outerHeight jQuery a des fonctions et , qui contiennent par défaut les bordures et les marges intérieures, et si le premier paramètre de la fonction est vrai, il contient également des marges extérieures.

https://www.php.cn/link/25e828afe5f637410a84442d27029c38

https://www.php.cn/link/a47ad724599e11d59272b02d08d0dbd7

JQUERY Élément intérieur / marge FAQ (FAQ)

css()

Comment utiliser jQuery pour obtenir la marge intérieure d'un élément?

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

Vous pouvez utiliser la méthode

de jQuery pour obtenir la marge intérieure d'un élément. Cette méthode renvoie la valeur d'attribut de style calculé. Par exemple, pour obtenir la marge intérieure d'un élément div, vous pouvez utiliser le code suivant:

Cela renverra la valeur de marge intérieure de l'élément div dans les pixels. css()

Comment définir la marge d'un élément à l'aide de jQuery?

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

Vous pouvez utiliser la méthode

de jQuery pour définir la marge d'un élément. Cette méthode définit une ou plusieurs propriétés de style de l'élément sélectionné. Voici un exemple de la façon de définir les marges d'un élément div:

outerWidth() outerHeight() Cela définira la marge de l'élément DIV à 20 pixels.

Quelle est la différence entre

et outerWidth() dans outerHeight()?

La méthode en jQuery renvoie la largeur de l'élément, y compris la marge intérieure et la bordure. Si le paramètre facultatif est défini sur true, les marges sont également incluses. D'un autre côté, la méthode renvoie la hauteur de l'élément, y compris la marge intérieure et la bordure. Si le paramètre facultatif est défini sur true, les marges sont également incluses.

Comment utiliser jQuery pour obtenir la taille d'un élément?

jQuery fournit plusieurs façons d'obtenir la taille d'un élément. Ces méthodes incluent width(), height(), innerWidth(), innerHeight(), outerWidth(), outerHeight() et

. Chaque méthode renvoie les dimensions correspondantes de l'élément sélectionné.

Comment modifier la taille d'un élément à l'aide de jQuery?

width() Vous pouvez modifier la taille d'un élément dans jQuery en utilisant les méthodes height(), innerWidth(), innerHeight(), outerWidth(), outerHeight(),

et

. Ces méthodes renvoient non seulement les dimensions correspondantes de l'élément sélectionné, mais définissent également une nouvelle dimension lors du passage de la valeur en tant que paramètre. innerWidth() Quelle est la différence entre outerWidth() et

dans

? innerWidth() outerWidth() La méthode

en jQuery renvoie la largeur de l'élément, y compris la marge intérieure mais pas la bordure ou la marge extérieure. D'un autre côté, la méthode

renvoie la largeur de l'élément, y compris la marge intérieure et la bordure. Si le paramètre facultatif est défini sur true, les marges sont également incluses.

Comment utiliser jQuery pour obtenir la largeur de bordure d'un élément? css()

jQuery Il n'y a pas de moyen direct d'obtenir la largeur de bordure d'un élément. Cependant, vous pouvez utiliser la méthode

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

pour obtenir la valeur d'attribut de style calculé, y compris la largeur de bordure. Par exemple:

Cela rendra la largeur de bordure de l'élément DIV dans les pixels.

Comment définir les marges intérieures et extérieures d'un élément utilisant JQuery en même temps? css()

Vous pouvez utiliser la méthode

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

de jQuery pour définir les marges intérieures et extérieures d'un élément en même temps. Par exemple:

Cela définira les marges intérieures et extérieures de l'élément DIV à 10 pixels et 20 pixels respectivement.

Comment utiliser jQuery pour obtenir la marge d'un élément? css()

Vous pouvez utiliser la méthode

(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);

de jQuery pour obtenir la marge d'un élément. Cette méthode renvoie la valeur d'attribut de style calculé. Par exemple, pour obtenir la marge d'un élément div, vous pouvez utiliser le code suivant:

Cela renverra la valeur de marge de l'élément div dans les pixels.

Comment régler la largeur de bordure d'un élément à l'aide de jQuery? css()

Vous pouvez utiliser la méthode

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

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

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

de jQuery pour définir la largeur de bordure d'un élément. Cette méthode définit une ou plusieurs propriétés de style de l'élément sélectionné. Voici un exemple de la façon de définir la largeur de bordure d'un élément div:

Cela définira la largeur de bordure de l'élément DIV à 2 pixels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!