Deep Learning about DOM element locating attributes

Deep Learning about DOM element locating attributes

Published by sansan at pm under Front End | Front-End

When I used to write JS programs, I often encountered locating problems. But every time I see half of it, it's okay to find the desired attribute.

Today, I am so worried that it will take some time to thoroughly understand him.

The following content is not surprising if you are familiar with it, because it is a summary of articles from many predecessors.

  Width and height

JQuery ('# elem'). width () // gets the width defined by CSS.

JQuery ('# elem'). height () // gets the height defined by CSS.

ClientWidth = width + padding

ClientHeight = height + padding

OffsetWidth = width + padding + border

OffsetHeight = height + padding + border

ScrollWidth // The scroll width of the object

ScrollHeight // The scroll height of the object

ClientLeft // borderLeftWidth

ClientTop // borderTopWidth

 

Left, Top

ScrollTop // The distance between the left boundary of the object and the leftmost end of the currently visible content in the window

ScrollLeft // The distance between the top of the object and the top of the visible content in the window

OffsetTop // The position at the top of the parent node

OffsetLeft // left position relative to the parent node

  Parent node

ParentNode // is the parent node. Understand and apply it in terms of structure.

OffsetParent // relative to the parent node. Understand and apply the layout.

 

The x and y coordinates of the mouse relative to the browser

E. clientX, e. clientY

 

The x and y coordinates of the mouse relative to the trigger event container

E. offsetX, e. offsetY // for IE

E. layerX, e. layerY // for FF

 

Vertical scroll Value

Document.doc umentElement. scrollTop

Document. body. scrollTop (Quirks Mode)

 

The x and y coordinates of the mouse relative to the top of the page

PageX, pageY // for FF

E. clientX + document.doc umentElement. scrollLeft // for IE

E. clientY + document.doc umentElement. scrollTop // for IE

 

Absolute coordinates relative to the padding of the Body

JQuery ('# elem'). offset ();

 

At last, we will attach an old figure.