react 展示对象_React.js学习笔记(15) window对象 + ( element对象盒模型属性 ) + 滚动到最顶部按钮...

(一) window对象

(1) 概述

在浏览器中，window对象(注意，w为小写)指当前的浏览器窗口。它也是所有对象的顶层对象。

window对象，w是小写

window对象，是所以对象的顶层对象

顶层对象：指的是最高一层的对象，所有其他对象都是它的下属。

JavaScript规定，浏览器环境的所有全局变量，都是window对象的属性。

全局变量，window对象属性

var a = 1;

window.a // 1

上面代码中，变量a是一个全局变量，但是实质上它是window对象的属性。

声明一个全局变量，就是为window对象的同名属性赋值。

(2) window对象的属性

(1) window.window

window对象的window属性指向自身。

window.window === this // true

(2) window.name

window.name属性用于设置当前浏览器窗口的名字。

与窗口通信时，非常有用。

(3) window.location

window.location返回一个location对象，用于获取窗口当前的URL信息。它等同于document.location对象

window.location返回一个 location 对象

location对象包含了当前窗口的 URL 信息

window.location === document.location // true

window.location对象 = document.location对象

(4) window.closed

window.closed属性返回一个布尔值，表示窗口是否关闭。

window.closed 这个属性一般用来检查，使用脚本打开的新窗口是否关闭。

var x = window.open();

x.closed // false

if (x != null && !x.closed ){

console.log('如果不等于null并且没有关闭，则输出窗口仍然打开着')

}

(5) window.opener

window.opener属性返回打开当前窗口的父窗口。如果当前窗口没有父窗口，则返回null。

window.opener属性 返回打开当前窗口的父窗口

通过opener属性，可以获得父窗口的的全局变量和方法

(6) window.screenX属性，window.screenY属性

window.screenX，返回浏览器窗口左上角相对于当前屏幕左上角((0, 0))的水平距离

window.screenY，返回浏览器窗口左上角相对于当前屏幕左上角((0, 0))的垂直距离

(7) window.innerHeight，window.innerWidth

window.innerHeight属性，返回 ( 网页 ) 在当前窗口中可见部分的 ( 高度 ) ，即“视口”(viewport)，单位为像素

window.innerWidth属性， 返回 ( 网页 ) 在当前窗口中可见部分的 ( 宽度 ) ，即“视口”(viewport)，单位为像素

注意，这两个属性值包括滚动条的高度和宽度。

(8) window.outerHeight，window.outerWidth

window.outerHeight属性返回 ( 浏览器窗口的高度 )，包括浏览器菜单和边框，单位为像素。

window.outerWidth属性 返回 ( 浏览器窗口的宽度 )，包括浏览器菜单和边框，单位为像素。

(9) window.pageXOffset，window.pageYOffset

( 注意 )：----------------------------是只读属性

因为是只读，所以不带参数。

window.pageXOffset属性返回页面的水平滚动距离，单位都为像素。

window.pageYOffset属性返回页面的垂直滚动距离，单位都为像素。

如果用户向下拉动了垂直滚动条75像素，那么window.pageYOffset就是75。用户水平向右拉动水平滚动条200像素，window.pageXOffset就是200。

window.innerWidth，window.outerWidth，window.screenX，window.pageXOffset

(3) window对象的方法

(1) window.scrollTo()--------滚动到

window.scrollTo方法用于将网页 ( 滚动到 ) 文档中的某个坐标。

它的参数是相对于整张网页的横坐标和纵坐标。

window.scrollTo(x-coord,y-coord )