jquery or JS gets to the element wide-high precision to decimal

First we should know that when we use the width () method of jquery to get the width of the element and the value of the style attribute, if the element's property is a floating-point number, it is automatically rounded to an integer.

And if we just want to get the actual numeric value of the decimal attribute, what is the method.

In order to ensure consistency with the width of the original element when using the obtained width, there are two solutions that I work with:

First JS native method Getboundingclientrect ()

$ (obj) [0].getboundingclientrect (). width.tofixed (2); Get width Preserve two decimal places

The width and height compatibility of this method is poor: IE9 supports width/height properties.

Attach the IE6~IE8-compatible width/height to the wording:

var rectwidth = rectobject.right-rectobject.left;    Rectheight = Rectobject.bottom-rectobject.top;

If the first party takes the left and top, it is not a position, it refers to the distance between the top of the element and the top or left of the window.

Compatibility with IE11 document mode test, IE5 above can support. Left and top are two more pixels below IE7 and IE7.

The second JS native final style method, that is, currentstyle and getComputedStyle compatible notation

var oabc = $ ('. Element ') [0];
if (Oabc.currentstyle) {
    IE, Opera
    alert (oAbc.currentStyle.width);
    var elementx = parsefloat ($ ('. Element ') [0].currentstyle.left]. toFixed (2);
    var elementy = parsefloat ($ ('. Element ') [0].currentstyle.top]. toFixed (2);

} else {
    FF, Chrome, Safari
    var elementx = parsefloat (getComputedStyle ($ (') element ') [0],false]. left). toFixed (2);
    var elementy = parsefloat (getComputedStyle ($ ('. Element ') [0],false]. Top). toFixed (2);
}

getComputedStyle (Obj,false): In the new version of FF only the first number of parameters, that is, the operation of the object, the second reference to write "false" is also the general wording, the purpose is to be compatible with the old version of the Firefox browser.

It is recommended to use the second, good compatibility, and can be taken at the same time width, height, left, top accurate values.

jquery or JS gets to the element wide-high precision to decimal