Introduction
Solve the problem of getting DOM elements in various browsers
Compatibility
IE 6 7 8 Firefox 3.6 chrome 4.0 currently only tests these browsers
Author
Jelle Lu QQ: 271412542 Email: idche@qq.com blogs: http://www.cnblogs.com/idche/
Source Code Description
Jquery source code is very helpful to me, and also uses the source code of a classmate called bruce lee. Of course, more resources come from the network.
Function Description
// The jelle (ELEM) object ELEM transmits the Object ID or DOM object. If the object is a window, the window object is passed.
//. Offset () returns the absolute position of the current object relative to the browser. Return Value = {top: A, left: B };
//. Inner () returns the width and height of the visible area of the current object. The returned value is {Hangzhou H: A, left: B };
//. Scroll () returns the top and left areas of the current object. , Return value = {top: A, left: B };
//. Offparent () returns the top left position of the current object from the parent node. , Return value = {top: A, left: B };
//. Client () returns the available height and width of the current object. Return Value: {width: A, height: B };
//. Screen () returns the available height and width of the current screen. Return Value = {width: A, height: B };
//. Mouse (event) returns the X and Y coordinates of the current mouse. If ELEM is not empty, return the coordinates of ELEM. Return Value: {X: A, Y: B };
Example
// Example: return the width of the visible area of a div with ID test // jelle ('test'). Inner (). Width // you can directly lower the width next to it.
Jquery-based source code
CopyCode The Code is as follows: <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Style type = "text/CSS">
. Jelle_box {margin: 10px; Border: 5px solid #000; padding: 10px; overflow: Scroll ;}
. O {Height: 100px ;}
. T {Height: 100px ;}
. H {Height: 100px ;}
# Jieshao Li {white-space: Pre ;}
# Jieshao Li {padding: 0; margin: 0 ;}
</Style>
</Head>
<SCRIPT type = "text/JavaScript" src = "jquery-1.4.2.js"> </SCRIPT>
<Body>
<DL>
<DT> introduction </DT>
<DD> solve the problem of obtaining DOM elements in various browsers </DD>
<DD> compatibility </DD>
<DD> IE 6 7 8 Firefox 3.6 chrome 4.0 currently only tests these browsers </DD>
<DT> author </DT>
<DD> jelle Lu QQ: 271412542 Email: idche@qq.com blogs: http://www.cnblogs.com/idche/ </DD>
<DT> source code description </DT>
<DD> jquery source code is very helpful to me. I also use the source code of a classmate called bruce lee. Of course, more resources come from the network. </DD>
<DT> function description </DT>
<DD>
<Ul id = "jieshao">
<Li> // jelle (ELEM) object ELEM transmits the Object ID or DOM object if it is a window transfer window object </LI>
<Li> //. offset () returns the absolute position of the current object relative to the browser. The returned value is {top: A, left: B}. </LI>
<Li> //. Inner () returns the width and height of the visible area of the current object. The returned value is {symbol H: A, left: B };</LI>
<Li> //. Scroll () returns the top and left of the volume area of the current object. , Return value = {top: A, left: B }; </LI>
<Li> //. offparent () returns the top left position of the current object from the parent node. , Return value = {top: A, left: B }; </LI>
<Li> //. Client () returns the available height and width of the current object. Return Value: {width: A, height: B }; </LI>
<Li> //. Screen () returns the available height and width of the current screen. Return Value: {width: A, height: B }; </LI>
<Li> //. mouse (event) returns the X and Y coordinates of the current mouse. If ELEM is not empty, return the coordinates of the relative ELEM. Return Value: {X: A, Y: B };
</LI>
</Ul>
</DD>
<DT> example </DT>
<DD> // example: returns the visible area width of a div with ID test.
// Jelle ('test'). Inner (). Width
// You can directly lower the width next to it </DD>
</Dl>
<Textarea id = "jelle_code" style = "width: 300px; Height: 50px;"> jelle ('T'). offset (). Top </textarea>
<Input type = "button" value = "Running code" onclick = "alert (eval (document. getelementbyid ('jelle _ Code'). Value)"/>
<Div class = "jelle_box o" id = "O">
Div. ID = o
<Div class = "jelle_box t" id = "T">
Div. ID = T
<Br/>
<Br/>
<Div class = "jelle_box H" id = "H"> Div. ID = H <br> OK. Here is a test place. It contains 3 Div nesting <br/> </div> <br/> <br /> <br/>
</Div>
<Br/>
</Div>
<SCRIPT type = "text/JavaScript">
// *** Introduction
// Solve the problem of retrieving DOM elements in various browsers
// *** Compatibility
// IE 6 7 8 Firefox 3.6 chrome 4.0 currently only tests these browsers
// *** Author
// Jelle Lu QQ: 271412542 Email: idche@qq.com blogs: http://www.cnblogs.com/idche/
// ***** Source Code Description
// Jquery source code is very helpful to me. Of course, more resources come from the network.
// ***** Function Description
// The jelle (ELEM) object ELEM transmits the Object ID or DOM object. If the object is a window, the window object is passed.
//. Offset () returns the absolute position of the current object relative to the browser. Return Value = {top: A, left: B };
//. Inner () returns the width and height of the visible area of the current object. The returned value is {Hangzhou H: A, left: B };
//. Scroll () returns the top and left values of the current object in the volume partition. the return value is {top: A, left: B };
//. Offparent () returns the top left position of the current object from the parent node. the return value is {top: A, left: B };
//. Client () returns the available height and width of the current object. Return Value: {width: A, height: B };
//. Screen () returns the available height and width of the current screen. Return Value = {width: A, height: B };
//. Mouse (event) returns the X and Y coordinates of the current mouse. Return Value = {X: A, Y: B };
// ***** Example
// Example: returns the visible area width of a div with ID test.
// Jelle ('test'). Inner (). Width
// You can directly lower the width next to it.
VaR jelle = function (ELEM ){
// Sys browser judgment
VaR sys = (function (){
VaR sys ={}, UA = navigator. useragent. tolowercase ();
// SYS. Firefox = UA. Match (/Firefox \/([\ D \.] +)/) | false; // log out because it is not used later
SYS. Ie = UA. Match (/MSIE \ s ([\ D \.] +)/) | false;
// SYS. Chrome = UA. Match (/chrome \/([\ D \.] +)/) | false; // log out because it is not used later
Return sys;
})(),
Comstyle = function (OBJ ){
Return window. getcomputedstyle? Window. getcomputedstyle (OBJ, null): obj. currentstyle;
},
// ELEM current Object window or other object
ELEM = typeof ELEM = 'string '? Document. getelementbyid (ELEM ):
ELEM === undefined? Window: ELEM,
Isie =/^ 6.0 | 7.0 | 8.0 $/. Test (SYS. ie [1]), // whether the IE browser is used
Isie67 =/^ 6.0 | 7.0 $/. Test (SYS. ie [1]),
DB = Document. Body,
Ddw.document.doc umentelement,
_ This = {};
// Distance of the object from the browser to 0
_ This. offset = function (o ){
// Thanks to Sugar particles for telling me this method.
// With this method, at least 15 lines of code are omitted.
Return (O? O: ELEM). getboundingclientrect ();
}
// The width and height windows of the visible area of the current object
_ This. Inner = function (){
VaR width, height;
// Not window object
If (ELEM! = Window ){
VaR computedstyle = comstyle (ELEM );
Width = ELEM. offsetwidth;
Height = ELEM. offsetheight;
// Isie =/^ 6.0 | 7.0 | 8.0 $/. Test (SYS. ie [1]),
If (isie ){
Width-= parseint (computedstyle. margintop) | 0;
Height-= parseint (computedstyle. marginleft) | 0;
} Else {
Width-= parseint (computedstyle. paddingtop) | 0;
Height-= parseint (computedstyle. paddingleft) | 0;
}
} Else {
// Window needs to distinguish between browsers
// Isie =/^ 6.0 | 7.0 | 8.0 $/. Test (SYS. ie [1]),
If (isie ){
Width = dd. offsetwidth;
Height = dd. offsetheight;
} Else {
// Current ELEM = Window
Width = ELEM. innerwidth;
Height = ELEM. innerheight;
}
}
// Returned data format {width: A, height: B}
Return {'width': width, 'height': height };
}
// Obtain the distance from the scroll bar Volume of the object
_ This. Scroll = function (o ){
VaR _ ELEM = O? O: ELEM, top, left;
If (_ ELEM = Window ){
Top = dB. scrolltop + dd. scrolltop;
Left = dB. scrollleft + dd. scrollleft;
} Else {
Top = _ ELEM. scrolltop | 0;
Left = _ ELEM. scrollleft | 0;
}
Return {'top': Top, 'left': Left };
}
// Obtain the location of the object from the parent node
_ This. offparent = function (){
Return {'top': _ this. offset (ELEM). Top-_ this. offset (ELEM. parentnode). Top,
'Left': _ this. offset (ELEM). Left-_ this. offset (ELEM. parentnode). Left
};
}
// Available height and width of the current object
_ This. Client = function (){
Return ELEM = window? {'Width': DB. clientwidth, 'height': DB. clientheight }:
{'Height': ELEM. scrollwidth, 'height': ELEM. scrollheight };
}
// The width and height of the available workspace on the screen
_ This. Screen = function (){
Return {'width': window. Screen. availwidth, 'height': window. Screen. availheight ,}
}
// Obtain the current mouse position
_ This. Mouse = function (e) {// to obtain the mouse coordinate, please pass the evnet Parameter
VaR E = Window. Event | E,
P = (E. pagex | E. Pagey )? {X: E. pagex, Y: E. Pagey }:
{X: E. clientx + dB. scrollleft-db. clientleft, Y: E. clienty + dB. scrolltop-db. clienttop };
Return ELEM = window? P:
{X: P. Y-_ this. offset (). Top, Y: p. x-_ this. offset (). Left };
}
Return _ this;
}
</SCRIPT>
</Body>
</Html>
