JQuery height () innerheight () outerhight () width () innerwidth () outerwidth () Source code interpretation

On the second level each, the object passed in with a height example is this,

It iterates through the call function (Defaultextra,funcname), which means that the incoming Defaultextra is the key padding/content/"", and FuncName is the corresponding innerheight,height, Outerheight.

Jquery.fn[funcname] has four branches inside:
1, $ (window). Height ()
Then return directly to Window.document.documentElement.clientHeight

2, $ (document). Height ()

                    return Math.max (                        "scroll" + name], doc["scroll" +                        name], "offset" + name], doc["offset" + nam E],                        "client" + name]                    );

It is obvious that it returns the maximum value in these 5 values.

3, if the value, call JQUERY.CSS ()

4, if it is an assignment, call Jquery.style ()

Finally, these two branches are more complex inside, jquery.css,csshooks,cssprops is the focus = =, and so on after the detailed look at the time to write it.

Jquery.each ({height: "height", Width: "width"},function(name, type) {Jquery.each ({padding:"Inner" + name, Content:type, "": "outer" + name},function(Defaultextra, funcName) {//Margin is only for outerheight, Outerwidthjquery.fn[FuncName] =function(margin, value) {varchainable = Arguments.length && (Defaultextra | |typeofMargin!== "Boolean"), Extra= Defaultextra | | (Margin = = =true|| Value = =true? "Margin": "Border" ); returnAccess This,function(Elem, type, value) {varDoc; if(Jquery.iswindow (elem)) {//as of 5/8/2012 this would yield incorrect results for Mobile Safari, but there                    //isn ' t a whole lot we can do. See pull request at the this URL for discussion:                    //https://github.com/jquery/jquery/pull/764                    returnelem.document.documentelement["Client" +name]; }                //Get Document width or height                if(Elem.nodetype = = 9) {Doc=elem.documentelement; //either Scroll[width/height] or offset[width/height] or client[width/height],                    //whichever is greatest                    returnMath.max (elem.body["Scroll" + name], doc["scroll" +name], elem.body["offset" + name], doc["offset" +name], doc["Client" +name]); }                returnValue = = undefined?//Get width or height on the element, requesting and not forcing parsefloatjquery.css (Elem, type, extra)://Set width or height on the elementJquery.style (Elem, type, value, extra); }, type, chainable? margin:undefined, Chainable,NULL );    }; });});

JQuery height () innerheight () outerhight () width () innerwidth () outerwidth () Source code interpretation