JQuery Get Element Polsterung/Rand

In diesem Artikel wird erläutert, wie JQuery verwendet wird, um die inneren Rand- und Randwerte von DOM -Elementen zu erhalten und festzulegen, insbesondere die spezifischen Orte des äußeren Randes und der inneren Ränder des Elements. Während es möglich ist, die inneren und äußeren Ränder eines Elements mit CSS einzustellen, kann es schwierig sein, genaue Werte zu erhalten.

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

Sie denken vielleicht, dass dieser Code einfach ist, aber er funktioniert nicht.

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

Versuchen Sie es selbst (fügen Sie den folgenden Code in Firebug ein). Sie werden feststellen, dass die zurückgegebenen Margen- und Polsterwerte leer sind.

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

Dieser Code scheint zu funktionieren.

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

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

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

Wie auch immer, so bekomme ich die Ränder im Element. Dieser Ansatz ist nicht ideal und funktioniert nur, wenn die inneren Ränder gleichmäßig sind (auf jeder Seite gleich). Holen Sie sich einfach die Breite und die äußere Breite und teilen Sie sich durch 2.

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

Ein beliebtes Plugin namens JSISSE könnte eine gute Lösung sein, um die inneren/externen Margenwerte des Elements zu erhalten/festzulegen. JSISIZE ist ein kleines Plugin für die JQuery JavaScript -Bibliothek, die Unterstützung für das Abfragen und Einstellen von CSS min-width, min-height, max-width, max-height, border-*-width, margin, padding,

,

, und erhält.

outerWidth Weitere Lesen outerHeight jQuery hat und Funktionen, die standardmäßig Grenzen und innere Ränder enthalten, und wenn der erste Parameter der Funktion wahr ist, enthält er auch äußere Ränder.

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

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

JQuery Element Inner/Margin FAQ (FAQ)

css()

Wie kann ich JQuery verwenden, um den inneren Rand eines Elements zu erhalten?

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

Sie können die

-Methode von JQuery verwenden, um den inneren Rand eines Elements zu erhalten. Diese Methode gibt den berechneten Attributwert zurück. Um beispielsweise den inneren Rand eines DIV -Elements zu erhalten, können Sie den folgenden Code verwenden:

Dies gibt den inneren Randwert des Div -Elements in Pixel zurück. css()

Wie setzen Sie den Rand eines Elements mit JQuery ein?

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

Sie können die

-Methode von JQuery verwenden, um den Rand eines Elements festzulegen. Diese Methode legt eine oder mehrere Stileigenschaften des ausgewählten Elements fest. Hier ist ein Beispiel dafür, wie Sie die Ränder eines DIV -Elements festlegen:

outerWidth() outerHeight() Dies setzt den Rand des Div -Elements auf 20 Pixel.

Was ist der Unterschied zwischen

und outerWidth() in outerHeight()?

Die -Methode in jQuery gibt die Breite des Elements zurück, einschließlich des inneren Randes und der Grenze. Wenn der optionale Parameter auf True eingestellt ist, sind auch die Ränder enthalten. Andererseits gibt die -Methode die Höhe des Elements zurück, einschließlich des inneren Randes und der Grenze. Wenn der optionale Parameter auf True eingestellt ist, sind auch die Ränder enthalten.

Wie kann ich JQuery verwenden, um die Größe eines Elements zu erhalten?

jQuery bietet verschiedene Möglichkeiten, um die Größe eines Elements zu erhalten. Diese Methoden umfassen width(), height(), innerWidth(), innerHeight(), outerWidth(), outerHeight() und

. Jede Methode gibt die entsprechenden Abmessungen des ausgewählten Elements zurück.

Wie ändere ich die Größe eines Elements mit JQuery?

width() Sie können die Größe eines Elements in jQuery mithilfe der Methoden height(), innerWidth(), innerHeight(), outerWidth(), outerHeight(),

und

ändern. Diese Methoden geben nicht nur die entsprechenden Dimensionen des ausgewählten Elements zurück, sondern setzen auch eine neue Dimension fest, wenn der Wert als Parameter überholt wird. innerWidth() Was ist der Unterschied zwischen outerWidth() und

in

? innerWidth() outerWidth() Die

-Methode in jQuery gibt die Breite des Elements zurück, einschließlich des inneren Randes, nicht jedoch der Grenze oder der äußere Rand. Andererseits gibt die

-Methode die Breite des Elements zurück, einschließlich des inneren Randes und der Grenze. Wenn der optionale Parameter auf True eingestellt ist, sind auch die Ränder enthalten.

Wie kann ich JQuery verwenden, um die Grenzbreite eines Elements zu erhalten? css()

jQuery Es gibt keinen direkten Weg, um die Grenzbreite eines Elements zu erhalten. Sie können jedoch die

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

-Methode verwenden, um den berechneten Attributwert einschließlich der Randbreite zu erhalten. Zum Beispiel:

Dies gibt die Grenzbreite des Div -Elements in Pixeln zurück.

Wie kann man die inneren und äußeren Ränder eines Elements gleichzeitig mit JQuery einstellen? css()

Sie können die

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

-Methode von JQuery verwenden, um die inneren und äußeren Ränder eines Elements gleichzeitig festzulegen. Zum Beispiel:

Dies setzt die inneren und äußeren Ränder des Div -Elements auf 10 Pixel bzw. 20 Pixel.

Wie kann ich JQuery verwenden, um den Rand eines Elements zu erhalten? css()

Sie können die

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

-Methode von JQuery verwenden, um den Rand eines Elements zu erhalten. Diese Methode gibt den berechneten Attributwert zurück. Um beispielsweise den Rand eines DIV -Elements zu erhalten, können Sie den folgenden Code verwenden:

Dies gibt den Randwert des Div -Elements in Pixeln zurück.

Wie setze ich die Randbreite eines Elements mit JQuery ein? css()

Sie können die

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

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

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

-Methode von JQuery verwenden, um die Randbreite eines Elements festzulegen. Diese Methode legt eine oder mehrere Stileigenschaften des ausgewählten Elements fest. Hier ist ein Beispiel dafür

Dies setzt die Grenzbreite des Div -Elements auf 2 Pixel.

Das obige ist der detaillierte Inhalt vonJQuery Get Element Polsterung/Rand. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!