ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryは要素のパディング/マージンを取得します

jQueryは要素のパディング/マージンを取得します

Joseph Gordon-Levitt
リリース: 2025-03-01 08:53:09
オリジナル
1009 人が閲覧しました

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に貼り付けます)。返されたマージンとパディング値が空であることがわかります。

(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で割るだけです。

JSIZESと呼ばれる一般的なプラグインは、要素の内側/外側のマージン値を取得/設定するための適切なソリューションかもしれません。 JSIZESは、jQuery JavaScriptライブラリの小さなプラグインで、CSS var item = $('div.header'); width = item.width(), padding = (item.outerWidth()-width)/2;、

min-widthmin-heightmax-widthmax-heightborder-*-widthmarginpadding、および

さらに読み取り

jQueryにはouterWidthおよびouterHeight関数があり、デフォルトでは境界と内側のマージンが含まれており、関数の最初のパラメーターが真の場合、外側の縁も含まれています。 https://www.php.cn/link/25e828afe5f637410a84442d27029c38https://www.php.cn/link/a47ad7245999999999999999999999999272b082b082b082b

jQuery要素内/マージンFAQ(FAQ)

jqueryを使用して要素の内側のマージンを取得する方法は?

jQueryの

メソッドを使用して、要素の内側のマージンを取得できます。このメソッドは、計算されたスタイル属性値を返します。たとえば、div要素の内側のマージンを取得するには、次のコードを使用できます。

css()これにより、ピクセルのdiv要素の内側マージン値が返されます。

var padding = $("div").css("padding");
ログイン後にコピー
jQueryを使用して要素のマージンを設定するにはどうすればよいですか?

jQueryの

メソッドを使用して、要素のマージンを設定できます。このメソッドは、選択した要素の1つ以上のスタイルプロパティを設定します。 Div要素のマージンを設定する方法の例は次のとおりです。

これにより、div要素のマージンが20ピクセルになります。 css()

$("div").css("margin", "20px");
ログイン後にコピー
の違いは何ですか?

jQueryの

メソッドは、内側の縁と境界を含む要素の幅を返します。オプションのパラメーターがtrueに設定されている場合、マージンも含まれています。一方、outerWidth()メソッドは、内側の縁と境界を含む要素の高さを返します。オプションのパラメーターがtrueに設定されている場合、マージンも含まれています。 outerHeight()

jqueryを使用して要素のサイズを取得するにはどうすればよいですか?

jQueryは、要素のサイズを取得するためのいくつかの方法を提供します。これらの方法には、width()height()innerWidth()innerHeight()outerWidth()outerHeight()

が含まれます。各メソッドは、選択した要素の対応する寸法を返します。

jQueryを使用して要素のサイズを変更するにはどうすればよいですか?

width() height()innerWidth()innerHeight()outerWidth()outerHeight()

、およびinnerWidth()メソッドを使用して、jQueryの要素のサイズを変更できます。これらのメソッドは、選択した要素の対応する寸法を返すだけでなく、値をパラメーターとして渡すときに新しい次元を設定します。 outerWidth()

の違いは何ですか? innerWidth() outerWidth() jQueryの

メソッドは、境界線または外縁を含む内側の縁を含む要素の幅を返します。一方、

メソッドは、内側のマージンと境界を含む要素の幅を返します。オプションのパラメーターがtrueに設定されている場合、マージンも含まれています。

jqueryを使用して要素の境界幅を取得する方法は? css()

jQuery要素の境界幅を取得する直接的な方法はありません。ただし、
// 设置
$("div.header").css("margin","10px");
$("div.header").css("padding","10px");
ログイン後にコピー
ログイン後にコピー
メソッドを使用して、境界幅を含む計算されたスタイル属性値を取得できます。たとえば、

これにより、ピクセルのdiv要素の境界幅が返されます。

jQueryを使用して要素の内側と外側の縁を同時に設定する方法は? css()

jQueryの
// 获取
$("div.header").css("margin");
$("div.header").css("padding");
ログイン後にコピー
ログイン後にコピー
メソッドを使用して、要素の内側と外側の縁を同時に設定できます。たとえば、

これにより、Div要素の内側縁と外側の縁がそれぞれ10ピクセルと20ピクセルに設定されます。

jqueryを使用して要素のマージンを取得する方法は? css()

jQueryの
(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要素のマージンを取得するには、次のコードを使用できます。

これにより、ピクセルのdiv要素のマージン値が返されます。

jQueryを使用して要素の境界幅を設定する方法は?

css() jQueryの

メソッドを使用して、要素の境界幅を設定できます。このメソッドは、選択した要素の1つ以上のスタイルプロパティを設定します。 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 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート