jQuery How to Get Element s Margin and Padding

Question

Just wondering - how using jQuery - I can get an elements formatted total padding and margin etc    i e  30px 30px 30px 30px or 30px 5px 15px 30px etc  I tried  var margT   jQuery  img   css  margin    var bordT   jQuery  img   css  border    var paddT   jQuery  img   css  padding      But this doesn t work   http   jsfiddle net q7Mra

User · Answer

This works for me   var tP      img   css  padding   split       var Padding         Top  tP 0     null   parseInt tP 0     0      Right  tP 1     null   parseInt tP 1      tP 0     null   parseInt tP 0     0       Bottom  tP 2     null   parseInt tP 2      tP 0     null   parseInt tP 0     0       Left  tP 3     null   parseInt tP 3      tP 1     null   parseInt tP 1      tP 0     null   parseInt tP 0     0        Result example   Object  Top  5  Right  8  Bottom  5  Left  8    To make a total   var TotalPadding   Padding Top   Padding Right   Padding Bottom   Padding Left

User · Answer

var bordT      img   outerWidth   -    img   innerWidth    var paddT      img   innerWidth   -    img   width    var margT      img   outerWidth true  -    img   outerWidth     var formattedBord   bordT    px   var formattedPadd   paddT    px   var formattedMarg   margT    px     Check the jQuery API docs for information on each    outerWidth innerWidth width   Here s the edited jsFiddle showing the result   You can perform the same type of operations for the Height to get its margin  border  and padding

User · Answer

According to the jQuery documentation  shorthand CSS properties are not supported   Depending on what you mean by  total padding   you may be able to do something like this   var  img      img    var paddT    img css  padding-top            img css  padding-right            img css  padding-bottom            img css  padding-left

User · Answer

Border I believe you can get the border width using  css  border-left-width    You can also fetch top  right  and bottom and compare them to find the max value   The key here is that you have to specify a specific side  Padding See jQuery calculate padding-top as integer in px Margin Use the same logic as border or padding  Alternatively  you could use outerWidth   The pseudo-code should bemargin    outerWidth true  - outerWidth false     2   Note that this only works for finding the margin horizontally   To find the margin vertically  you would need to use outerHeight

User · Answer

If the element you re analyzing does not have any margin  border or whatsoever defined you won t be able to return it  At tops you ll be able to get  auto  which is normally the default   From your example I can see that you have margT as variable  Not sure if re trying to get margin-top  If that s the case you should be using  css  margin-top     You re also trying to get the stylization from  img  which will result  if you have more than one  in an array   What you should do is use the  each   jquery method   For example   jQuery  img   each function            get margin top     var margT   jQuery this  css  margin-top            Do something with margT

User · Answer

Edit  use jquery plugin  jquery sizes js    img   margin   or    img   padding    return   bottom  10  left  4  top  0  right  5   get value     img   margin   top

User · Answer

jQuery css   returns sizes in pixels  even if the CSS itself specifies them in em  or as a percentage  or whatever  It appends the units   px    but you can nevertheless use parseInt   to convert them to integers  or parseFloat    for where fractions of pixels make sense    http   jsfiddle net BXnXJ         document  ready function          var  h1      h1        console log  h1        h1 after     lt div gt Padding-top      parseInt  h1 css  padding-top        lt  div gt           h1 after     lt div gt Margin-top      parseInt  h1 css  margin-top        lt  div gt

User · Answer

I ve a snippet that shows  how to get the spacings of elements with jQuery       messing vertical spaces of block level elements with jQuery in pixels     console clear     var jObj      selector     for var i   0  l   jObj length  i  lt  l  i          jObj eq i  css  display    block      console log  jQuery object    jObj eq i      console log  plain element    jObj i       console log  without spacings                - jObj eq i  height               jObj eq i  height       console log  with padding                    - jObj i  clientHeight            jObj i  clientHeight     console log  with padding and border         - jObj eq i  outerHeight          jObj eq i  outerHeight       console log  with padding  border and margin - jObj eq i  outerHeight true     jObj eq i  outerHeight true      console log  total vertical spacing                                            jObj eq i  outerHeight true  - jObj eq i  height

[jquery] jQuery How to Get Element's Margin and Padding?

Examples related to jquery

Examples related to padding

Examples related to margin