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
Copy codeThe 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>