Jsjs Advanced--JS three families: The offset family scroll family client family

1.1 Three major families and one event object

Three major families (offset/scroll/client)

Event Object/event (the state of the mouse and keyboard when the event is touched) (via property control)

1.2 Offset Family Introduction

The word offset is itself-the meaning of offset, compensation, and displacement.

JS in a set of convenient way to get the element size is the offset family;

Offsetwidth and Offsethight as well as offsetleft and offsettop and offsetparent

Together make up the offset family.

1.2.1 Offsetwidth and offsethight (Detection box self-width-high +padding+border)

These two properties, they are bound on all the node elements. Once obtained, we are able to get the width and height of the element nodes as long as the two properties are called.

Offset width/height = width/height + padding+border of the box itself;

Offsetwidth =width+padding+border;

Offsetheight =height+padding+border;

1.2.2 Offsetleft and offsettop (Detect distance from parent box with positioned left/top)

Returns the position of the left side of the upper box (with positioning)

If the parent is not positioned, the body will prevail

Offsetleft from Father's padding, father's border not count.

Offsetleft = = Style.left (remove px) in case the parent box is positioned

1.2.3 OffsetParent (detects parent box nodes with positioning in the Father box)

1. Returns the parent of the object (with positioning)

If the parent element of the current element does not have CSS positioning (position is absolute or relative,fixed), offsetparent is body.

2. If there is a CSS anchor in the parent element of the current element (position is absolute or relative,fixed), Offsetparent takes the nearest parent element.

1.3 Offsetleft and Style.left differences

One, the biggest difference is that offsetleft can return to the left side of the distance without locating the box.

and Style.left can not

Second, OffsetTop return is a number, and Style.top returns a string, in addition to the number of units: px.

Third, OffsetTop read only, and Style.top can read and write. (Read-only is get value, writable is Assignment)

If the top style is not specified for the HTML element, Style.top returns an empty string.

Style.left is not the same on the left and right side of =. (The left side is the property, the right side is the value)

Scroll family composed of scrollwidth and scrollheight (not including border)

Detects the width and height of the box. (Caller: node element.) Property. ）

The width and height of the contents of the box. (if there is more content than that, the height of the content is displayed)

IE567 can be smaller than a box. ie8+ Firefox Google can't be smaller than a box

ScrollLeft and ScrollTop

Web page, which is obscured by the browser's head and left part.

The head and left part are rolled away.

Compatibility issues

I. Undeclared DTD (Google only knows him)

Document.body.scrollTop

Ii. already declared DTD (IE678 only knows him)

Document.documentElement.scrollTop

Third, Firefox/Google/ie9+ above supported

Window.pageyoffset

Compatible wording

var aaa = Window.pageyoffset | | Document.documentElement.scrollTop | | Document.body.scrollTop | | 0;

var AAA = Document.documentElement.scrollTop + document.body.scrollTop;

Event event1.1 Event Object Acquisition (acquisition of events)

IE678, window.event

In Firefox, the event, or, in a function that is bound by events, the parameter is event.

Box.onclick = function (AAA) {AAA is event}

There are two ways to get 1.2 compatible:

Do not write parameters directly using the event;

Write parameter, but for Event....var event = Event | | Window.event; (mainly in this case)

1.3 Event Content Important content

Pagey/pagex: The distance of the mouse over the top and left sections of the page. Page

Screeny/screenx: The distance between the top of the screen and the left side of the mouse. Screen

Clientx/clienty: The mouse is located on the left and top of the browser. (Browser size and location)

1.1 Pagey and Pagex compatibility (very important)

At the page position equals = visible + invisible

Pagey/pagex=event.clienty/clientx+scroll (). Top/scroll (). Left

Client Family

1.1 Main Members

1, clientwidth get the width of the viewable area of the Web page (two usage)

ClientHeight get the visual area height of a Web page (two usage)

Different callers, different meanings:

Box invocation: Refers to the box itself.

Body/html Call: The viewable area size.

2. ClientX mouse distance from visible area (event call)

ClientY mouse distance from visible area (event call)

3, Clienttop/clientleft box of border width and height

1.2 Three major family differences (summary of three families) 1.2.1 width and height

clientwidth = width + padding

clientheight = height + padding

offsetwidth = width + padding + border

offsetheight = height + padding + border

ScrollWidth = content width (not including border) width + padding

scrollheight = content height (not including border)

1.2.2 Top and left

Offsettop/offsetleft:

Caller: any element. (Box-based)

It works: Distance from the parent box with positioning.

Scrolltop/scrollleft: (box can also be called, must have scroll bar)

Caller: document.body.scrolltop/..... (window)

Function: The part that the browser cannot display (the part that is being rolled out).

Clienty/clientx: (clienttop/clientleft value is border)

Caller: Event.clientx (Event)

The distance of the mouse from the viewable area of the browser (left, top).

Width and height
Offset band Border
Scroll without border, the content of the width of the high
Client does not take border

Top and left
Offset distance from parent box with positioned box
Scroll the distance of the part to be rolled away
Clientborder Width and height

Clientx and Clienty
event invocation, distance of the mouse from the viewable area of the browser

1.3 Client Family Special usage: Check browser width/height (viewable area)

1.4 OnResize Events

As long as the size of the browser changes, even if 1 pixels, will touch the event.

1.5 Case: Based on browser viewable area size, given background color 1.6 Event Summary

Distinguish:

1.window.onscroll Screen Swipe

2.window.onresize Browser size Changes

3.window.onload Page Loading complete

4.div.onmousemove Mouse moves on the box

(Note: Not box Move!!!) ）

5.onmouseup/onmousedown = = onclick

1.7 Getting the screen width high

Window.screen.width

Resolution is the precision of the screen image, which indicates how many pixels the display can display.

Our computers are generally:

1280 pixels across the landscape.

960 pixels vertically.

When we watch a movie, it's full screen and half-screen, that's it.

Jsjs Advanced--JS three families: The offset family scroll family client family