jQuery mendapatkan padding/margin elemen

Artikel ini membincangkan cara menggunakan jQuery untuk mendapatkan dan menetapkan margin dalaman dan nilai margin elemen DOM, terutama lokasi tertentu margin luar dan margin dalaman elemen. Walaupun ada kemungkinan untuk menetapkan margin dalaman dan luar elemen menggunakan CSS, nilai yang tepat boleh menjadi rumit.

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

Anda mungkin berfikir kod ini mudah, tetapi ia tidak berfungsi.

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

Cuba sendiri (tampal kod berikut ke Firebug). Anda akan mendapati bahawa nilai margin dan padding yang dikembalikan kosong.

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

Kod ini nampaknya berfungsi.

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

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

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

Bagaimanapun, ini adalah bagaimana saya mendapat margin di dalam elemen. Pendekatan ini tidak ideal dan hanya berfungsi jika margin dalaman bahkan (sama di setiap sisi). Hanya dapatkan lebar dan lebar luar dan bahagikan dengan 2.

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

Plugin popular yang dipanggil JSIZS mungkin penyelesaian yang baik untuk mendapatkan/menetapkan nilai margin dalaman/luar elemen. JSIZS adalah plugin kecil untuk perpustakaan JQuery JavaScript yang menambah sokongan untuk menanyakan dan menetapkan CSS

, min-width, min-height, max-width, max-height, border-*-width, margin, padding,

, dan

bacaan selanjutnya

outerWidth outerHeight JQuery mempunyai fungsi dan , yang secara lalai mengandungi sempadan dan margin dalaman, dan jika parameter pertama fungsi itu benar, ia juga mengandungi margin luar. Https://www.php.cn/link/25e828afe5f637410a8444442d27029c38

JQuery Element Inner/Margin FAQ (FAQ)

Bagaimana menggunakan jQuery untuk mendapatkan margin dalaman elemen?

anda boleh menggunakan kaedah

jQuery untuk mendapatkan margin dalaman elemen. Kaedah ini mengembalikan nilai atribut gaya yang dikira. Sebagai contoh, untuk mendapatkan margin dalaman elemen div, anda boleh menggunakan kod berikut:

css()

Ini akan mengembalikan nilai margin dalaman elemen div dalam piksel.

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

Bagaimana untuk menetapkan margin elemen menggunakan jQuery?

anda boleh menggunakan kaedah

jQuery untuk menetapkan margin elemen. Kaedah ini menetapkan satu atau lebih ciri gaya elemen yang dipilih. Berikut adalah contoh cara menetapkan margin elemen div:

css()

Ini akan menetapkan margin elemen Div kepada 20 piksel.

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

Apakah perbezaan antara

dan

dalam

? outerWidth() outerHeight() Kaedah

dalam jQuery mengembalikan lebar elemen, termasuk margin dan sempadan dalaman. Jika parameter pilihan ditetapkan kepada benar, margin juga dimasukkan. Sebaliknya, kaedah

mengembalikan ketinggian elemen, termasuk margin dan sempadan dalaman. Jika parameter pilihan ditetapkan kepada benar, margin juga dimasukkan. outerWidth()

Bagaimana menggunakan jQuery untuk mendapatkan saiz elemen?

JQuery menyediakan beberapa cara untuk mendapatkan saiz elemen. Kaedah ini termasuk width(), height(), innerWidth(), innerHeight(), outerWidth(), outerHeight() dan

. Setiap kaedah mengembalikan dimensi yang sepadan dengan elemen yang dipilih.

bagaimana menukar saiz elemen menggunakan jQuery?

width() Anda boleh menukar saiz elemen dalam jQuery menggunakan kaedah height(), innerWidth(), innerHeight(), outerWidth(), outerHeight(),

, dan

kaedah. Kaedah ini bukan sahaja mengembalikan dimensi yang sepadan dengan elemen yang dipilih, tetapi juga menetapkan dimensi baru apabila lulus nilai sebagai parameter. innerWidth() Apakah perbezaan antara outerWidth() dan

dalam

? innerWidth() outerWidth() Kaedah

dalam jQuery mengembalikan lebar elemen, termasuk margin dalaman tetapi bukan margin sempadan atau luar. Sebaliknya, kaedah

mengembalikan lebar elemen, termasuk margin dan sempadan dalaman. Jika parameter pilihan ditetapkan kepada benar, margin juga dimasukkan.

Bagaimana menggunakan jQuery untuk mendapatkan lebar sempadan elemen? css()

jQuery Tidak ada cara langsung untuk mendapatkan lebar sempadan elemen. Walau bagaimanapun, anda boleh menggunakan kaedah

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

untuk mendapatkan nilai atribut gaya yang dikira, termasuk lebar sempadan. Contohnya:

Ini akan mengembalikan lebar sempadan elemen div dalam piksel.

Bagaimana untuk menetapkan margin dalaman dan luaran elemen menggunakan jQuery pada masa yang sama?

css() anda boleh menggunakan kaedah

jQuery untuk menetapkan margin dalaman dan luaran elemen pada masa yang sama. Contohnya:

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

Ini akan menetapkan margin dalaman dan luaran elemen div kepada 10 piksel dan 20 piksel masing -masing.

Bagaimana menggunakan jQuery untuk mendapatkan margin elemen?

anda boleh menggunakan kaedah css() jQuery untuk mendapatkan margin elemen. Kaedah ini mengembalikan nilai atribut gaya yang dikira. Sebagai contoh, untuk mendapatkan margin elemen div, anda boleh menggunakan kod berikut:

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

Ini akan mengembalikan nilai margin elemen div dalam piksel.

Bagaimana untuk menetapkan lebar sempadan elemen menggunakan jQuery?

anda boleh menggunakan kaedah css() jQuery untuk menetapkan lebar sempadan elemen. Kaedah ini menetapkan satu atau lebih ciri gaya elemen yang dipilih. Berikut adalah contoh bagaimana untuk menetapkan lebar sempadan elemen div:

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

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

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

Ini akan menetapkan lebar sempadan elemen div kepada 2 piksel.

Atas ialah kandungan terperinci jQuery mendapatkan padding/margin elemen. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!