jQuery get element padding/margin

This article discusses how to use jQuery to obtain and set the inner margin and margin values ​​of DOM elements, especially the specific locations of the outer margin and inner margins of the element. While it is possible to set the inner and outer margins of an element using CSS, getting accurate values ​​can be tricky.

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

You might think this code is simple, but it doesn't work.

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

Try it yourself (paste the following code into Firebug). You will find that the returned margin and padding values ​​are empty.

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

This code seems to work.

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

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

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

Anyway, this is how I get the margins inside the element. This approach is not ideal and only works if the inner margins are even (the same on each side). Just get the width and outer width and divide by 2.

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

A popular plugin called jsizes might be a good solution to get/set the inner/outside margin values ​​of the element. JSizes is a small plugin for the jQuery JavaScript library that adds support for querying and setting CSS min-width, min-height, max-width, max-height, border-*-width, margin, padding,

,

, , and properties.

outerWidthFurther readingouterHeight jQuery has and functions, which by default contain borders and inner margins, and if the first parameter of the function is true, it also contains outer margins.

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

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

jQuery Element Inner/Margin FAQ (FAQ)

css()

How to use jQuery to get the inner margin of an element?

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

You can use the

method of jQuery to get the inner margin of an element. This method returns the calculated style attribute value. For example, to get the inner margin of a div element, you can use the following code:

This will return the inner margin value of the div element in pixels. css()

How to set the margin of an element using jQuery?

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

You can use the

method of jQuery to set the margin of an element. This method sets one or more style properties of the selected element. Here is an example of how to set the margins of a div element:

outerWidth() outerHeight()This will set the margin of the div element to 20 pixels.

What is the difference between

and outerWidth() in outerHeight()?

The method in jQuery returns the width of the element, including the inner margin and border. If the optional parameter is set to true, margins are also included. On the other hand, the method returns the height of the element, including the inner margin and border. If the optional parameter is set to true, margins are also included.

How to use jQuery to get the size of an element?

jQuery provides several ways to get the size of an element. These methods include width(), height(), innerWidth(), innerHeight(), outerWidth(), outerHeight() and

. Each method returns the corresponding dimensions of the selected element.

How to change the size of an element using jQuery?

width()You can change the size of an element in jQuery using the height(), innerWidth(), innerHeight(), outerWidth(), outerHeight(),

, and

methods. These methods not only return the corresponding dimensions of the selected element, but also set a new dimension when passing the value as a parameter. innerWidth() What is the difference between outerWidth() and

in

? innerWidth() outerWidth() The

method in jQuery returns the width of the element, including the inner margin but not the border or outer margin. On the other hand, the

method returns the width of the element, including the inner margin and border. If the optional parameter is set to true, margins are also included.

How to use jQuery to get the border width of an element? css()

jQuery There is no direct way to get the border width of an element. However, you can use the

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

method to obtain the calculated style attribute value, including the border width. For example:

This will return the border width of the div element in pixels.

How to set the inner and outer margins of an element using jQuery at the same time? css()

You can use the

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

method of jQuery to set the inner and outer margins of an element at the same time. For example:

This will set the inner and outer margins of the div element to 10 pixels and 20 pixels respectively.

How to use jQuery to get the margin of an element? css()

You can use the

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

method of jQuery to get the margin of an element. This method returns the calculated style attribute value. For example, to get the margin of a div element, you can use the following code:

This will return the margin value of the div element in pixels.

How to set the border width of an element using jQuery? css()

You can use the

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

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

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

method of jQuery to set the border width of an element. This method sets one or more style properties of the selected element. Here is an example of how to set the border width of a div element:

This will set the border width of the div element to 2 pixels.

The above is the detailed content of jQuery get element padding/margin. For more information, please follow other related articles on the PHP Chinese website!