Padding or Margin Value in Pixels as Integer Using Jquery

jQuery How to Get Element's Margin and Padding?

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

jQuery calculate padding-top as integer in px

One of the main strengths of jQuery is that it is so pluggable, so if you have a need that is not immediately satisfied by the library, there's a vast landscape of plugins to search. And if there is none that does what you want, it's really easy to roll your own.

I think the right way to go here, if you can't find a plugin that does what you want, is the last one: to write your own.

However, make sure that you are clear with yourself on the specs of your plugin. What should it return if the element has no css setting for padding? Should it return the styling on this element, or the computed style? What happens for invalid css (say 'padding-top: 10 unitsThatDontExist;' or 'padding-left: two;')?

To get you started - this is what using your own plugin could look like in your code:

var topPadding = $('#anElement').padding('top');

To make that available, just write a plugin like this:

$.fn.padding(direction) {
    // calculate the values you need, using a switch statement
    // or some other clever solution you figure out

    // this now contains a wrapped set with the element you apply the 
    // function on, and direction should be one of the four strings 'top', 
    // 'right', 'left' or 'bottom'

    // That means you could probably do something like (pseudo code):
    var intPart = this.css('padding-' + direction).getIntegerPart();
    var unit = this.css('padding-' + direction).getUnit();

    switch (unit)
    {
        case 'px':
            return intPart;
        case 'em':
            return ConvertEmToPx(intPart)
        default:
            // Do whatever you feel good about as default action
            // Just make sure you return a value on each code path
    }
};

How to compare margin-left of an element with a negative value

jQuery.css() method will return the margin-left value with "px" So you have to use parseInt() to get the integer out of it and then compare with any valid value.

Try this

var marginLeftValue = parseInt(canvas.css('margin-left'), 10);
if (marginLeftValue <= -200) {
       //do something
}

PS: If you also want to handle the case of margin-left: auto then you should use this as well.

marginLeftValue = isNaN(marginLeftValue) ? 0 : marginLeftValue;

get the margin size of an element with jquery

The CSS tag 'margin' is actually a shorthand for the four separate margin values, top/left/bottom/right. Use css('marginTop'), etc. - note they will have 'px' on the end if you have specified them that way.

Use parseInt() around the result to turn it in to the number value.

NB. As noted by Omaty, the order of the shorthand 'margin' tag is: top right bottom left - the above list was not written in a way intended to be the list order, just a list of that specified in the tag.

Margin and padding reset after jquery effect

The problem that you have is caused by JqueryUI that put position:absolute; when you apply a bounce. This is resolvable by putting your img or the element that will get the bounce inside a div with position:relative; and the right height

Working DEMO.

Total width of element (including padding and border) in jQuery

[Update]

The original answer was written prior to jQuery 1.3, and the functions that existed at the time where not adequate by themselves to calculate the whole width.

Now, as J-P correctly states, jQuery has the functions outerWidth and outerHeight which include the border and padding by default, and also the margin if the first argument of the function is true

---

[Original answer]

The width method no longer requires the dimensions plugin, because it has been added to the jQuery Core

What you need to do is get the padding, margin and border width-values of that particular div and add them to the result of the width method

Something like this:

var theDiv = $("#theDiv");
var totalWidth = theDiv.width();
totalWidth += parseInt(theDiv.css("padding-left"), 10) + parseInt(theDiv.css("padding-right"), 10); //Total Padding Width
totalWidth += parseInt(theDiv.css("margin-left"), 10) + parseInt(theDiv.css("margin-right"), 10); //Total Margin Width
totalWidth += parseInt(theDiv.css("borderLeftWidth"), 10) + parseInt(theDiv.css("borderRightWidth"), 10); //Total Border Width

Split into multiple lines to make it more readable

That way you will always get the correct computed value, even if you change the padding or margin values from the css

How to get just numeric part of CSS property with jQuery?

This will clean up all non-digits, non-dots, and not-minus-sign from the string:

$(this).css('marginBottom').replace(/[^-\d\.]/g, '');

UPDATED for negative values

With jQuery retrieve the line-height in numbered format instead of pixels

Not sure you can get a value other than pixels in this way, however, you could use data attributes to populate both the styling, and give you a way to access what you want.

Note. I've used the data attribute to hold the style mainly to use less code, however this means there will be a flicker in appearance too, so would be more ideal to have the style already set, or better in the CSS.

jQuery(function() {
    // Set line heights based on data attribute if necessary
    jQuery("[data-lh]").each(function(){
      var _self = jQuery(this);
      _self.css("line-height", _self.data("lh"));
    });
    
    // Get Line Height from data Attribute
    var lineheight = jQuery('#line-height').data('lh');
    console.log(lineheight);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<div id="line-height" data-lh="1.5">HOWDY</div>

---

Related Topics