<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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 li{padding:0; margin:0;}
</style>
<script type= "Text/javascript" src= "Jquery-1.4.2.js" ></script>
<body>
<dl>
<dt> Introduction </dt>
<dd> solve the position of getting DOM elements under each browser </dd>
<dd> compatibility </dd>
<dd>ie 6 7 8 Firefox 3.6 Chrome 4.0 Currently only tests these few browsers </dd>
<dt> author </dt>
<dd>jelle Lu qq:271412542 email:idche@qq.com blogs:http://www.cnblogs.com/idche/</dd>
<dt> Source Description </dt>
<dd>jquery source gave me a lot of help, but also used a call Bruce · Li's classmate source code, of course, more resources from the network. </dd>
<dt> function Description </dt>
<dd>
<ul id= "Jieshao" >
<li>//Jelle (Elem) object Elem passing object IDs or DOM objects if window objects are passed by Windows </li>
<li>//.offset () returns the absolute position of the current object relative to the browser, the return value = {top:a,left:b};</li>
<li>//.inner () returns the width and height of the current object's visible area, the return value = {wisth:a,left:b};</li>
<li>//.scroll () Returns the current object is volume area top and left. , the return value = {top:a,left:b};</li>
<li>//.offparent () returns the top left of the current object's location from the parent node. , the return value = {top:a,left:b};</li>
<li>//.client () returns the available height and width of the current object, the return value = {width:a,height:b};</li>
<li>//.screen () returns the available height and width of the current screen, the return value = {width:a,height:b};</li>
<li>//.mouse (Event) returns the X,y coordinate of the current mouse, elem NOT NULL returns the relative elem coordinates, the return value = {X:A,Y:B};
</li>
</ul>
</dd>
<dt> Example </dt>
<dd>//Example: Returns the visible area width of a div with the ID test
Jelle (' Test '). Inner (). width
This can be followed directly from the back width</dd>
</dl>
<textarea id= "Jelle_code" style= "width:300px; height:50px; " >jelle (' t '). Offset () .top</textarea>
<input type= "button" value= "runs 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. He contains 3 div nesting <br/><br/><br/><br/></div><br/><br/><br/><br/> <br/><br/><br/><br/><br/><br/><br/>
</div>
<br/><br/><br/><br/>
</div>
<script type= "Text/javascript" >
Introduced
To resolve where to get DOM elements under each browser
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 Description
jquery source gives me a lot of help, of course, more resources from the network.
Function description
Jelle (Elem) object Elem Pass the object ID or DOM object if it is a Window object
. Offset () returns the absolute position of the current object relative to the browser, returning the value = {TOP:A,LEFT:B};
. Inner () returns the width and height of the current object's visible area, with the return value = {WISTH:A,LEFT:B};
The. Scroll () returns the current object by the volume area top and left, the return value = {TOP:A,LEFT:B};
. Offparent () returns the current object's position from the parent node, the return value = {TOP:A,LEFT:B};
. Client () returns the available height and width of the current object, the return value = {WIDTH:A,HEIGHT:B};
. screen () returns the available height and width of the current screens, with the return value = {WIDTH:A,HEIGHT:B};
. Mouse (Event) returns the X,y coordinate of the current mouse, returning the value = {X:A,Y:B};
Example
Example: Returns the visible area width of a div with the ID test
Jelle (' Test '). Inner (). width
This can be followed directly by the width below.
var jelle=function (elem) {
SYS Browser judge
var sys= (function () {
var sys={},ua=navigator.useragent.tolowercase ();
sys.firefox= Ua.match (/firefox\/([\d\.] +)/) || False It's not in the back, so write it off.
Sys.ie= Ua.match (/msie\s ([\d\.] +)/) || False
Sys.chrome= Ua.match (/chrome\/([\d\.] +)/) || False It's not in the back, so write it off.
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 IE browser
Isie67=/^6.0|7.0$/.test (Sys.ie[1]),
Db=document.body,
Dd=document.documentelement,
_this={};
Object distance from browser to 0 0 points
_this.offset=function (o) {
Thank the sugar particle for telling me this method
With this method, at least 15 lines of code are omitted.
Return (O?o:elem). Getboundingclientrect ();
}
Width window for visible area of 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{
Windows needs to differentiate 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;
}
}
The data format returned {WIDTH:A,HEIGHT:B}
return {' width ': width, ' height ': height};
}
Gets the distance of the object scroll bar volume
_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};
}
Gets the location of the object from the parent node
_this.offparent=function () {
return {"Top": _this.offset (elem). Top-_this.offset (Elem.parentnode).
' 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 ':d b.clientwidth, ' height ':d b.clientheight}:
{' Height ': elem.scrollwidth, ' height ': elem.scrollheight};
}
Screen Available Workspace width height
_this.screen=function () {
return {' width ': window.screen.availWidth, ' height ': window.screen.availHeight,}
}
Gets the position of the current mouse
_this.mouse=function (e) {//get mouse coordinates, pass evnet parameters
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>
