JS的学习5

1.元素尺寸

1. clientWidth和clientHeight：获取元素内部可视区域尺寸，内容区域+内边距不包括外边距边框和滚动条，只读
2. innerWidth和innerHeight：获取浏览器视口尺寸，包含滚动条
3. offset，只读属性，没有单位

1. getBoundingClientRect()元素综合属性,返回元素的大小及其相对于视口的位置

• element.getBoundingClientR() 返回值如下
• x/left: 元素左侧距离视口左侧的距离
• y/top：元素顶部距离视口顶部的距离
• width：元素的宽度（包含padding和border）
• height：元素的高度（包含padding和border）
• right：元素右侧距离视口左侧的距离
• bottom：元素底部距离视口顶部的距离

2.坐标属性

1. screen屏幕坐标

• screenX、screenY（鼠标事件位置）
• screen.width、screen.height（屏幕分辨率）

1. client视口坐标

• clientX、clientY （鼠标事件位置）
• element.clientWidth、element.clientheight（元素的尺寸包含padding）

1. page文档坐标

• pageX、pageY（鼠标事件位置）
• document.documentElement.scrollHeight（文档总高度）

3.元素滚动

4.浏览器视口

1. inner

• window.innerWidth 获取浏览器窗口视口的宽，包含滚动条
• window.innerHeight获取浏览器窗口视口的高度，包含滚动条

1. client

• 可以用于元素与document

1. outer

• 不能用于元素只能用于window
• window.outerWidth
• window.outerHeight

1. screen

• screen.width用户显示屏幕的物理宽度
• screen.height用户显示屏幕的物理高度
• 不能用于元素

5.页面尺寸事件

1. resize resize事件在浏览器窗口大小改变时触发（包括最大化/最小化/拖动边缘）

6.定时器

1. setTimeout 设置一个定时器
2. clearTimeout()清除定时器

7.改变this指向

1. call func.call(thisArg, arg1, arg2, ...)
2. apply func.apply(thisArg, argsArray)
3. bind const newFunc = func.bind(thisArg, arg1, arg2, ...) newFunc()

8.location

1. url 统一资源定位符 格式：protocol://host:port/path/?query#fragment
2. 属性

• href 完整url读写
• protocol 协议（带: 例：https: 读写）
• host 主机名+端口（读写）
• hostname 主机名（读写）
• port 端口号（读写）
• pathname 路径（以/开头，读写）
• search 查询参数 （以？开头，读写）
• hash 锚点 （以#开头，读写）
• origin 源（协议+主机+端口，只读）

1. 方法

• assign()跳转到新的url在浏览器中新增记录
• replace(url) 替换当前页面 不新增历史记录，无法后退
• reload(force) 重新加载页面（force=true强制从服务器获取，忽略缓存）

9.navigator

1. 用户代理：navigator.userAgent
2. 检查是否在线：navigator.onLine ? "在线" : "离线"
3. 获取地理位置：维度：navigator.onLine ? "在线" : "离线"、经度： position.coords.longitude

10.history

1. back() 后退至前一个网站
2. forward() 前进到下一个网站
3. go() 接受一个整数作为参数，以当前网址为基准，移动到参数指定的网址