Get container object (DIV) location information in JavaScript

Cases

The code is as follows

Copy Code

function CPos (x, y) { this.x = x; This.y = y; } function Getobjpos (obj)//Get the position of the control { var target = obj; var pos = new CPos (target.offsetleft,target.offsettop); var target = target.offsetparent; while (target) { Pos.x + = Target.offsetleft; Pos.y + = Target.offsettop; target = Target.offsetparent } return POS; } var mobj = Imobject; Changing position will change the z-index in CSS settings?? Need to reset Mobj.style.top = Getobjpos (obj). y+obj.offsetheight+ "px"; Mobj.style.left = Getobjpos (obj). x+ "px"; Mobj.style.zIndex = 101; mobj.style.display= "Block";

The above code gets the position information of the upper left corner of the current control, and if the bottom is needed, just add obj.offsetheight. Please note that the Imobject in this article is the Display menu, obj is the object that needs to be captured, such as a span, a TD? ... The CSS for another menu needs to be set in advance (for reference only):

The code is as follows	Copy Code
#menu {position:absolute;left:400px top:150px; padding:5px 10px 15px 10px;border:1px solid #ECEFF5 box-shadow:10px 1 0px 5px #888; z-index:101; Background: #ECEFF5; Text-align:center; Line-height:25px;overflow:hidden;display:none;}

Four, how to obtain the mouse click position coordinates

The code is as follows

Copy Code

function Getpagex (EV) { var x = Ev.pagex; if (!x && 0!== x) { x = Ev.clientx | | 0; if (This.isie) { x + + this._getscrollleft (); } } return x; } function Getpagey (EV) { var y = ev.pagey; if (!y && 0!== y) { y = Ev.clienty | | 0; if (This.isie) { Y + + this._getscrolltop (); } } return y; } var obj = Imobject; obj.style.position= "Absolute"; Obj.style.top = Getpagey (event) + ' px '; Obj.style.left = Getpagex (event) + ' px '; Obj.style.display = ' block ';

Common attributes Chinese explanation
obj.offsetwidth--the absolute width of an object element,

obj.offsetheight--the absolute height of an object element

clientheight--gets the height of the object, does not compute any margins, borders, scroll bars, but includes padding for the object.

clientleft--gets the distance between the Offsetleft property and the actual left side of the customer area.

clienttop--gets the distance between the offsettop property and the actual top of the customer area.

clientwidth--gets the width of the object, does not calculate any margins, borders, scroll bars, but includes padding for the object.

clientx--Sets or gets the x-coordinate of the mouse pointer's position relative to the window's customer area, where the customer area does not include controls and scrollbars for the window itself.

clienty--Sets or gets the y-coordinate of the mouse pointer's position relative to the window's customer area, where the customer area does not include controls and scrollbars for the window itself.

clip--Sets or gets which part of the anchored object is visible.

clipbottom--gets the bottom coordinate of the trimmed area of the object.

clipleft--gets the left coordinate of the object clipping area.

clipright--gets the right coordinate of the clipping area of the object.

cliptop--gets the top coordinate of the clipping area of the object.

JavaScript gets screen, window size method:

High screen resolution: window.screen.height;

Width of screen resolution: Window.screen.width;

Screen available workspace height (does not include taskbar): Window.screen.availHeight;

Screen Available workspace width (does not include taskbar): Window.screen.availWidth;

Web page visible area wide (does not contain scroll bars and borders): Document.body.clientWidth;

High page visible area (without scroll bars and borders): Document.body.clientHeight;

Web page visible area wide (contains scroll bars and borders): Document.body.offsetWidth;

High page visible area (contains scroll bars and borders): Document.body.offsetHeight;

Page body width: document.body.scrollWidth;

High content of Web page: document.body.scrollHeight;

The Web page is rolled up high: document.body.scrollTop;

The pages are rolled away left: document.body.scrollLeft;

On the body part of the Web page (the distance from the left edge of the screen on the leftmost page body): window.screentop;

Page body section left (the distance from the top edge of the page body): Window.screenleft.