Originally, since something was invented by Internet Explorer, everything should be based on Internet Explorer. I don't understand how to make the W3C bureaucracy recognize it. The only good thing W3C has done is to split the world into two camps for the cold war after the first battle of browsers. At that time, Apple was quickly broke by Microsoft. In order to avoid monopoly suspicion, Microsoft funded apple. One of the conditions was to allow Mac to use Internet Explorer, but similar browsers such as safari and opera, as early as in the first browser war, many methods of Internet Explorer and Internet Explorer were implemented. The rest is Firefox. In the past, no one had ever considered the W3C dumb. After Firefox was born, it began to implement a large number of (and may be secretly formulated) Methods of many W3C drafts. Of course, it cannot be said that W3C is not good at all, such as XPath, XQuery, and so on. Of course, it is also very small. Ie can survive even without them. Since then, ie has a series of layout-related methods, such as the offset family, scroll family, client family, getclientrects (), and getboundingclientrect (). These methods are so useful that Firefox and other stubborn browsers finally implement them. In particular, the getboundingclientrect method can obtain the coordinates and sizes of element nodes at a speed. At last, W3C finally got stuck and unified them with some methods for processing styles, called cssom (Cascading Style Sheets object model, stacked style table object model ).
The submission order of the draft is divided into two parts. The first part deals with the methods and attributes of the style sheet. In this regard, W3C has failed. In IE, it seems that only document. stylesheets is used, but this method is probably IE. I heard that all ie9 is supported, but XP does not support ie9! The second part deals with layout methods and attributes. It is basically something invented by IE, and of course there are some Firefox stuff. Now let's take a look at the second part:
First, an interface called abstractview is the basis of all views. We can find this in ff.
Alert (window. abstractview); // [object abstractview]
Then there is the media interface. I cannot find a proof of its existence.
Then there is the screenview interface, which is called document. defaultview in ff and other standard browsers. But in fact it is bound with more attributes than the W3C draft:
VaR AA = Document. getelementbyid ("AA"); var S = "" For (VAR name in document. defaultview) if (! /Firebug/I. Test (name) S + = Name + ":" + document. defaultview [name] +"
"AA. innerhtml = s;
<Br/> <! Doctype HTML> <br/> <HTML lang = "en"> <br/> <pead> <br/> <meta charset = "UTF-8"/> <br/> <meta content = "Ie = 6" http-equiv = "X-UA-compatible"/> </P> <p> <title> cssom by situ zhengmei </title> </P> <p> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <SCRIPT type =" text/JavaScript "> <br/> window. onload = function () {<br/> var AA = document. getelementbyid ("AA"); <br/> var S = "" <br/> for (VAR na Me in document. defaultview) <br/> If (! /Firebug/I. test (name) <br/> S + = Name + ":" + document. defaultview [name] + "<br>" <br/> AA. innerhtml = s; </P> <p >}</P> <p> </SCRIPT> <br/> </pead> <br/> <body> <br/> <p> run the following command in a standard browser: </P> <p> <Div id = "AA"> </P> <p> </div> <br/> </body> <br /> </ptml> <br/>
RunCode
Alert (window. innerwidth) Alert (window. innerheight) Alert (window. outerwidth) Alert (window. outerheight) Alert (window. pagexoffset) Alert (window. pageyoffset) Alert (window. screenx) Alert (window. screeny) Alert (window. scroll) Alert (window. scrollto) Alert (window. scrollby)
Screen Interface, used to provide information related to the user's display:
Alert (screen. availwidth) Alert (screen. availheight) Alert (screen. width) Alert (screen. Height) Alert (screen. colordepth) Alert (screen. pixeldepth)
the rest is not detailed. Basically, it is the set of Internet Explorer that standardizes the attributes of the mouse event object. It provides many computation benchmarks to calculate offsetleft and other values. Now let's focus on offsetparent. I remember John resig provided two functions for calculating the coordinate values of elements in pro. Javascript. techniques, a serious lack of detection:
// Page 144 // find the X (horizontal, left) position of an element function pagex (ELEM) {// see if we're at the root element, or not return ELEM. offsetparent? // If we can still go up, add the current offset and recurse upwards ELEM. offsetleft + pagex (ELEM. offsetparent): // otherwise, just get the current offset ELEM. offsetleft;} // find the Y (vertical, top) position of an element function Pagey (ELEM) {// see if we're at the root element, or not return ELEM. offsetparent? // If we can still go up, add the current offset and recurse upw ELEM. offsettop + Pagey (ELEM. offsetparent): // otherwise, just get the current offset ELEM. offsettop ;}
Or integrate it into the following similar versions:
VaR getoffseft = function (EL) {var x = 0; var y = 0; do {x + = el. offsetleft; y + = el. offsettop;} while (El = el. offsetparent); Return {X: X, Y: y };}
But in reality, both IE and earlier versions of the standard browser have some bugs for this offsetparent. If you want to calculate the offset, you also need to use offsetleft and offsettop, and they also have bugs, therefore, the calculation result of the above method is very different from that of the actual method. In jquery, John resig redesigned this function and added a series of auxiliary methods to obtain the corresponding features of the browser:
Jquery. FN. offset = function (options) {var ELEM = This [0]; If (options) {return this. each (function (I) {jquery. offset. setoffset (this, options, I) ;};} If (! ELEM |! ELEM. ownerdocument) {return NULL;} // special processing body if (ELEM === ELEM. ownerdocument. body) {return jquery. offset. bodyoffset (ELEM);} // obtain the browser features related to offset jquery. offset. initialize (); var offsetparent = ELEM. offsetparent, prevoffsetparent = ELEM, Doc = ELEM. ownerdocument, computedstyle, docelem = doc.doc umentelement, body = Doc. body, defaultview = Doc. defaultview, prevcomputedstyle = defaultview? Defaultview. getcomputedstyle (ELEM, null): ELEM. currentstyle, Top = ELEM. offsettop, Left = ELEM. offsetleft; while (ELEM = ELEM. parentnode) & ELEM! = Body & ELEM! = Docelem) {// html, body, and elements that do not have the CSS box model and those whose display is fixed do not have the offsetparent attribute if (jquery. offset. supportsfixedposition & prevcomputedstyle. position = "fixed") {break;} computedstyle = defaultview? Defaultview. getcomputedstyle (ELEM, null): ELEM. currentstyle; top-= ELEM. scrolltop; left-= ELEM. scrollleft; If (ELEM === offsetparent) {top + = ELEM. offsettop; left + = ELEM. offsetleft; // offset should return border-box, but some table elements do not calculate their border values. You need to add them manually. // in IE, the display of table elements is table, table-row and table-cell if (jquery. offset. doesnotaddborder &&! (Jquery. offset. doesaddborderfortableandcells & amp;/^ t (able | d | h) $/I. test (ELEM. nodename) {top + = parsefloat (computedstyle. bordertopwidth) | 0; left + = parsefloat (computedstyle. borderleftwidth) | 0;} prevoffsetparent = offsetparent, offsetparent = ELEM. offsetparent;} // corrected the Safari Error if (jquery. offset. subtractsborderforoverflownotvisible & computedstyle. overflow! = "Visible") {top + = parsefloat (computedstyle. bordertopwidth) | 0; left + = parsefloat (computedstyle. borderleftwidth) | 0;} prevcomputedstyle = computedstyle;} // Add the offset of the body if (prevcomputedstyle. position = "relative" | prevcomputedstyle. position = "static") {top + = body. offsettop; left + = body. offsetleft;} // use a fixed position. A scroll bar may appear. We need to obtain a large scroll distance if (jquery. offset. supportsfixedposition & prevcomputedstyle. position = "fixed") {top + = math. max (docelem. scrolltop, body. scrolltop); left + = math. max (docelem. scrollleft, body. scrollleft) ;}return {top: Top, left: Left };};
As shown above, this method of getting element positions through accumulation is very unpopular. Besides, I haven't written its auxiliary functions yet! No one is willing to write so many functions to obtain these two values without using the framework. However, the appearance and Application of getboundingclientrect have greatly improved the situation. Happy John resig wrote an article to greatly appreciate this method. He posted a picture in the middle of his blog, which intuitively shows how simple the new method is in length, not to mention the performance improvement! The following is my implementation:
// By situ zhengmei coords = function (EL) {// obtain the coordinates of the element (upper left corner) if (! El |! El. ownerdocument) {return NULL;} var Pos = {X: 0, Y: 0}, owner = el. ownerdocument; If (El. tagname = "body") {pos. X = el. offsettop; POS. y = body. offline setleft; // http://hkom.blog1.fc2.com /? The offset of mode = M & NO = 750 body is if (parsefloat (DOM. getstyle (El, "margin-top") that does not contain margin "))! = El. offsettop) {pos. X + = parsefloat (Dom. getstyle (El, "margin-top") | 0; POS. Y + = parsefloat (Dom. getstyle (El, "margin-left") | 0;} return Pos;} else if (owner. getboxobjectfor) {// Firefox return owner. getboxobjectfor (EL);} else if (El. getboundingclientrect) {// If getboundingclientrect is supported, you can use getboundingclientrect to obtain the rect of the element relative to the client. // http://msdn.microsoft.com/en-us/library/ms536433.aspx var Bo X = el. getboundingclientrect (), root = owner.doc umentelement, body = owner. getelementsbytagname ("body") [0], clienttop = root. clienttop | body. clienttop | 0, clientleft = root. clientleft | body. clientleft | 0; // Add the scroll part of the document to left and top. // 2 PX border is automatically added to IE. Here, the border size of document is removed. // The http://msdn.microsoft.com/en-us/library/ms533564 (vs.85 ). aspx POS. X = Box. left + (self. pageyoffset | Dom. feature. w3cbox & root. scrolltop | body. scrolltop)-clienttop, POS. y = Box. top + (self. pagexoffset | Dom. feature. w3cbox & root. scrollleft | body. scrollleft)-clientleft;} return Pos ;}
This is only a special case of the cssom method. We will use them more frequently when precisely obtaining element styles. When doing special effects, the appearance of those families is more frequent. Thanks to Microsoft for bringing us these good things. However, if you want to find out the exact meanings of offsetwidth and clientwidth, I suggest you go to the Firefox official website and check that Microsoft cannot control its own things. This is really sad.
Related links:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
