Day 76th: Width and height in jquery

the difference between a Window object and a document object

1. The window object represents the windows open in the browser

2, Window object can be omitted , such as alert () can also be written as Window.alert ()

The Document object is part of the window Object

Browser's HTML document becomes dicument object

Window.location and document.location

The Location property of the Window object is consumed by the Position object, which represents the URL of the document currently displayed in the window

The Location property of the Document object also references the Location property and also references the location Object

Window.location===document.location//true

window -related width and height introduction

window.innerwidth// The interior width of the browser window

the internal height of the. innerheight//browser window

. outerwidth

. outerheight

Window.screen contains user screen related information

. screen.height

. screen.width

. screen.availheight

. screen.availwidth

Window.screentop

Window.screenleft

Document -related width-height introduction

1. Client

Document.body.clientWidth and document.body.clientHeight

refers to the visible part width and height of an element, that is, padding+content.

If there is no scroll bar, the width height of the element is set

If there is a scrollbar, it is the width of the height minus the width of the scroll bar

no padding no scroll:clientwidth=style.width

with padding no scrolling:clientwidth=style.width+style.padding*2

there are padding scroll:clientwidth=style.width+style.padding*2- scroll bar width

Document.body.clientLeft and document.body.clientTop

the thickness of the border around the element, if you do not specify a border or do not position the element, the value is 0

Clienttop=border-top 's border-width

Clientleft=border-left 's border-width

2. Offset

Offsetwidth and offsetheight

Refers to the width and height of the border+padding+content of an element

whether the property and internal content are outside of the element size are related only to the set border and width and height

No padding no scroll no border

Offsetwidth=clientwidth=style.width

there are padding no scroll bars have border

Offsetwidth=clientwidth+border width *2=style.width+style.padding*2+ (border-width) * *

There are padding with border .

offsetwidth=style.width+style.padding*2+ (border-width) *2=clientwidth+ scroll axis width +border width * *

Offsetleft and offsetTop

if the parent element of the current element is not positioned, the offsetParent is the body

If there is a location,offsetParent takes the nearest parent element

3, Scroll

ScrollWidth and scrollheight

ScrollTop

ScrollLeft

Day 76th: Width and height in jquery