A brief analysis of several small changes in jQuery1.8_jquery

1. .width() and .height() methods

1.8 adds support for the css attribute box-sizing. Please note the difference from 1.7.2. In versions 1.7.2 and earlier, regardless of whether box-sizing is defined: border-box returns the width or height of the element content in the box model, excluding padding and border.

It is different after 1.8. When the css attribute box-sizing: box-border is set, the value returned by using width() may be different from the value set in css. For example,

Copy code The code is as follows:

< html>
                                                                          box -sizing: border-box;
-moz-box-sizing: border-box;
width: 500px;
padding: 5px; : 5px solid gold;
                                                              >                                                                                                            

🎜> console.log(w)






box- of div[id=container] sizing is set to border-box (Firefox 14.1 does not yet support border-box, use -moz-border-box).

In addition to setting width:500px, padding and border are also set to 5px respectively. The print results of each browser are as follows

IE6/7 : 500

IE8/9/10: 480

Safari5/6: 480

Chrome21/Firefox14: 480

IE6/7 does not support box-sizing, and the output is still 500. However, the output result of the browser that supports this familiarity is 480 (the border and padding of the box model are removed). Therefore, in 1.8, you need to pay attention to the resulting changes in width and height caused by using the box-sizing attribute.

2. .outerWidth and .outerHeight() methods

In versions 1.7.2 and earlier, outerWidth/outerHeight only serve as getters. If true is not passed, the width or height of the element (including padding and border) is returned. If true is passed (of course, the number 1 can also be passed) the return value plus margin is returned.

1.8 and later have the setter function. If you want to calculate the margin when getting it, you can only pass true, but you cannot pass the number 1, etc., because passing the number 1, etc. will be processed internally by jQuery as setting the element width and height. And what is returned is not a number but a jQuery object (the same as other jQuery setters).