Javascript code _ javascript skills

This article mainly introduces the implementation code for js to obtain the relative Window Location of elements. For more information, see JS obtains the offsetTop, offsetLeft, and other attributes of an element.

Obj. clientWidth // obtain the element width.

Obj. clientHeight // height of the element
Obj. offsetLeft // left of the element relative to the parent Element
Obj. offsetTop // The top of the element relative to the parent Element
Obj. offsetWidth // The width of the element
Obj. offsetHeight // The height of the element

Differences:

ClientWidth = width + padding
ClientHeight = height + padding
OffsetWidth = width + padding + border
OffsetHeight = width + padding + border
Offset has the border Width higher than the client.

// Obtain the ordinate of an element (relative to the window) function getTop (e) {var offset = e. offsetTop; if (e. offsetParent! = Null) offset + = getTop (e. offsetParent); return offset;} // obtain the abscissa (relative to the window) of the element. function getLeft (e) {var offset = e. offsetLeft; if (e. offsetParent! = Null) offset + = getLeft (e. offsetParent); return offset ;}

I have also written a JS article about getting element location: JS gets the offsetTop and offsetLeft attributes of an element. We can use the offsetTop and offsetLeft attributes to get the position of the element relative to the window, however, the offsetTop and offsetLeft attributes are located relative to the parent element, and the elements that need to be obtained are not in the outermost layer. Therefore, traversing the offset attribute of the parent element is indispensable. Efficiency becomes a problem.

// Obtain the ordinate of an element (relative to the window) function getTop (e) {var offset = e. offsetTop; if (e. offsetParent! = Null) offset + = getTop (e. offsetParent); return offset;} // obtain the abscissa (relative to the window) of the element. function getLeft (e) {var offset = e. offsetLeft; if (e. offsetParent! = Null) offset + = getLeft (e. offsetParent); return offset ;}

Fortunately, the browser provided me with the corresponding interface getBoundingClientRect. This method was first available in IE. Later, the browser also supported this method, and it is more complete, IE can only obtain the left, top, bottom, and right attributes of the element, while the modern browser can also obtain the width and

Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
1.0	3.0 (1.9)	4.0	(Yes)	4.0

It should be noted that bottom is the distance between the bottom of the element and the top of the window, rather than the position bottom in css relative to the bottom of the window. Likewise, the rihgt attribute is the distance from the rightmost side of the element to the left side of the window.

var box = document.getElementById("box");var pos = box.getBoundingClientRect();box.innerHTML = "top:"+pos.top +  "left:"+pos.left +  "bottom:"+pos.bottom +  "right:"+pos.right +  "width:"+pos.width +  "height:"+pos.height

Original article, reprinted Please note: Reprinted from front-end development