Summary of the attributes of offset, client, and scroll in javascript

Summary of the attributes of offset, client, and scroll in javascript_javascript skills

WBOY

Release： 2016-05-16 15:45:26

Original

1224 people have browsed it

HTML elements have several attributes starting with offset, client, and scroll, which are always confusing. Write down what you see in the book and share it with friends who need it. Mainly the following attributes:

The first group: offsetWidth, offsetHeight, offsetLeft, offsetTop, offsetParent

The second group: clientWidth, clientHeight, clientLeft, clientTop

The third group: scrollWidth, scrollHeight, scrollLeft, scrollTop

The detailed definition is as follows:

　1.1 The offsetWidth and offsetHeight of an HTML element return its screen size in CSS pixels, including the element's border and padding, but not the outer margin.

　1.2 The offsetLeft and offsetTop properties return the X and Y coordinates of the element. Usually, their return value is the document coordinates. But for descendants of positioned elements and some other elements (such as table cells), the coordinates returned by these properties are relative to the ancestor element rather than the document.

　1.3 The offsetParent attribute specifies the parent element relative to offsetLeft and offsetTop. If offsetParent is null, the return value of the latter two is document coordinates. So generally speaking, using offsetLeft and offsetTop to calculate the position of element e requires a loop:

//计算元素的文档坐标
function getElementPosition(e){
  var x=0,y=0;
  while(e !=null){
    x +=e.offsetLeft;
    y +=e.offsetTop;
    e=e.offsetParent; 
  }
  return {x:x, y:y} ;  
}

Copy after login

The position calculated by this method is not always correct. It is recommended to use the built-in getBoundingClientRect() method.

　2.1 clientWidth and clientHeight are similar to the offsetWidth and offsetHeight properties, except that they do not include the border size, only the content and padding. At the same time, if the browser adds scroll bars between the padding and the border, the return values of clientWidth and clientHeight do not include scroll bars. Note that clientWidth and clientHeight always return 0 for inline elements of type , and .

2.2 clientLeft and clientTop return the horizontal and vertical distances between the outer edge of the element's padding and the outer edge of its border. Usually these values are equal to the width of the left and top borders. But if the element has scroll bars, and the browser rotates those scroll bars to the left or top, they also include the width of the scroll bars. For inline elements, they are always 0. Usually clientLeft and clientTop are of little use. 　3.1 scrollWidth and scollHeight are the size of the element's content area plus its padding plus any overflowing content. When the content exactly matches the content area without overflowing, these properties are equal to clientWidth and clientHeight. But when they overflow, they contain the overflow content, and the return value is larger than clientWidth and clientHeight. 　3.2 scrollLeft and scrollTop specify the position of the scroll bar of the element. Note that scrollLeft and scrollTop are writable, and you can set them to scroll the content in the element (HTML elements do not have a scrollTo() method similar to the Window object). obj.offset[WidthHeightTopLeft] Get the position of the control relative to the parent control event.offset[XY] takes the coordinates of the mouse phase in the control that triggered the event event.screen[XY] mouse relative to screen coordinates event.client[XY] The mouse coordinates relative to the web page are at obj.scroll[WidthHeightTopLeft] Get the size of the object scroll obj.client[WidthHeightTopLeft] Get the size of the visible area of the object <!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=gb2312" /> <title>无标题文档</title> <style type="text/css">  </style> </head> <body> <div id='div1' >offset 控件相对于父窗体的位置</div> <script> function offset(ids){ ids.innerHTML="offsetLeft ="+ids.offsetLeft+"<BR>"; ids.innerHTML+="offsetWidth ="+ids.offsetWidth+"<BR>"; ids.innerHTML+="offsetHeight ="+ids.offsetHeight+"<BR>"; ids.innerHTML+="offsetTop ="+ids.offsetTop+"<BR>"; ids.innerHTML+="event.offset 鼠标相对于控件的位置<BR>"; ids.innerHTML+="offsetX ="+event.offsetX+"<BR>"; ids.innerHTML+="offsetY ="+event.offsetY+"<BR>"; } function screen(ids){ ids.innerHTML="scrollWidth ="+ids.scrollWidth+"<BR>"; ids.innerHTML+="scrollHeight ="+ids.scrollHeight+"<BR>"; ids.innerHTML+="scrollTop ="+ids.scrollTop+"<BR>"; ids.innerHTML+="scrollLeft ="+ids.scrollLeft+"<BR>"; } function client(ids){ ids.innerHTML="clientWidth ="+ids.clientWidth+"<BR>"; ids.innerHTML+="clientHeight ="+ids.clientHeight+"<BR>"; ids.innerHTML+="clientTop ="+ids.clientTop+"<BR>"; ids.innerHTML+="clientLeft ="+ids.clientLeft+"<BR>"; } function eventc(ids){ ids.innerHTML="鼠标相对于屏幕坐标<BR>event.screenX="+event.screenX+"<BR>"; ids.innerHTML+="event.screenY ="+event.screenY+"<BR>"; ids.innerHTML+="鼠标相对于网页坐标event.clientX="+event.clientX+"<BR>"; ids.innerHTML+="event.clientY ="+event.clientY+"<BR>"; } </script> </body> </html> Copy after login Each browser has these properties, and some values may be different. Write the code yourself, compare the results, and you will understand.