jquery Source Analysis---dom elements (medium)

5.2.2 Width&heigth

For the width and height of an element, the DOM element provides the client (clientheight,clientwidth), offset (offsetheight,offsetwidth), scroll (Srollheight, Srollwidth) Three ways, what's the difference between these three kinds? Client=content+padding. Offset=content+padding+border. The width and height of the scroll are not the original width and height of the scroll. This is usually larger than the current display size.

jquery also provides three of related widths and heights. Height ", and" width "is the width and height of the content of the element. Innerheigh, Innerwidth is the content of the element plus padding. is actually clientheight,clientwidth. Outerheigh and Outerwidth are added padding, border, and margin to the content of the element.

The advantage of these three methods of jquery is that they can measure the width and height of an element that is not visible.

In addition, the value of document.body is interpreted differently in different browsers (in fact, most environments are caused by different interpretations of the document.body, not because of the offset Interpretation of the difference caused by Document.documentelement is compatible.

Registering Height,width Methods for jquery objects
Gets the high (wide) degree value (px) of the current calculation of the first matching element. or set a value
The high (wide) Jquery.each (["Height", "width"] that can be used to get window and document after JQuery 1.2,
function (i, name) {
var type = Name.tolowercase ();
Jquery.fn[type] = function (size) {//window width and height
return this[0] = = window? (//window width and height ①
jquery.browser.opera&& document.body["Client" + name]
|| jquery.browser.safari&& window["inner" + name]
|| Document.compatmode = = "Css1compat" && document.documentelement["client" + name]
|| document.body["Client" + name])
: this[0] = = document? (//Document width and height ②
Math.max (Math.max (document.body["scroll" + name),
document.documentelement["Scroll" + name]),
Math.max (
document.body["offset" + name], document.documentelement["offset" + name))
: (size = = undefined?) (//The width and height of the first element ③
This.length? Jquery.css (This[0], type): null)
://Set the width and height of all elements of the current object
This.css (type, Size.constructor = = String?)
size:size+ "px"));
};
});

In the above code can be seen in the "Height", "width" divided into three parts, ① is the window of the width of the value, which is actually the document of the client's wide height. Document.documentelement refers to

The ② is wide for document, and its value may be greater than window. Because the offset is one more border than the client. And the document will also take a larger scroll than offset.

③ is to take or set the width of other elements. The value is accomplished by JQUERY.CSS, and the set value is accomplished by THIS.CSS, which is said in 5.2.1. Take a look at the jquery.css.

Gets the property value of the Elem name
Css:function (Elem, name, force) {
Height correction for element width
if (name = = "width" | | | name = = "Height") {
var val,props = {position: "absolute",
Visibility: "Hidden", Display: "Block"},
which = (name = = "width"?) [' Left ', ' right ']: [' top ', ' Bottom ']];
function Getwh () {//To calculate the actual height of the element, width offsetwidth=padding+border+element
val = name = = "width"?　　　　Elem.offsetWidth:elem.offsetHeight; var padding = 0, border = 0;
Jquery.each (which, function () {
padding + + parsefloat (//Paddinleft,paddingright
Jquery.curcss (Elem, "padding" + this, true)) | | 0;
Border + = parsefloat (//Borderleftwidth,borderrightwith
Jquery.curcss (Elem, "border" + This + "Width", true) | | 0;
});
http://msdn.microsoft.com/en-us/library/ms530302 (vs.85). aspx//http://msdn.microsoft.com/en-us/library/ ms534304 (vs.85). aspx
Offsetwidth-paddinleft-paddingright-orderleftwidth-borderrightwith
Val-= math.round (padding + border);//height also subtract.
}
Visible on the actual elements of the w,h. Except Padding,border
if (JQuery (Elem). Is (": visible")) Getwh ();
element is not visible, by making the element temporarily an absolute position, display:block, etc. to take the height or width
else Jquery.swap (elem, props, Getwh);
Return Math.max (0, Val);
}
Return Jquery.curcss (Elem, name, Force);
},