一、窗口相关数据和操作
（一）让窗口滚动到指定位置
1.滚到指定坐标：前提是页面够长 要能滚
- window.scrollTo(x,y)：滚动到指定位置
- scrollBy(x,y)：在之前滚动的数据基础上做累加（每次滚动一定范围）
2.滚动到指定元素可见区域：
- el.scrollIntoView(true)：调用元素的底部会尽量与视口的顶部齐平
- 若传递参数为true，将元素和视口的上边缘对齐 出现在body顶部
- 若传递参数为false，将元素的下边缘和视口的下边缘对齐 出现在body底部
3.页面滚动的距离：
window.pageXOffset/window.pageYOffset //bom操作，IE8及IE8以下不兼容
document.body.scrollLeft/scrollTop
document.documentElement.scrollLeft/scrollTop
//兼容做法:
let sX=window.pageYOffset||document.body.scrollLeft || document.documentElement.scrollLeft
let sY=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop
（二）窗口的可视区域尺寸
1.查看视口的尺寸（受窗口缩放影响）：
//标准模式下(<!DOCTYPE html>，渲染模式) 任意浏览器都兼容
document.documentElement.clientWidth
document.documentElement.clientHeight
//bom操作，IE8及IE8以下不兼容
window.innerWidth
window.innerHeight
//适用于混杂模式下的浏览器
document.body.clientWidth
document.body.clientHeight
//可区分标准模式与否(BackCompat：标准兼容模式关闭。CSS1Compat：标准兼容模式开启)
document.compatMode
//判断是否是ie浏览器
console.log(window.navigator.appVersion.toLocaleLowerCase().indexOf("msie") 2.兼容做法：
let cWidth,cHeight;
if (document.compatMode == "BackCompat") {
cWidth = window.innerWidth||document.body.clientWidth;
cHeight =window.innerHeight||document.body.clientHeight;
} else {
//document.compatMode == "CSS1Compat"
cWidth = window.innerWidth||document.documentElement.clientWidth;
cHeight = window.innerHeight||document.documentElement.clientHeight;
}（三）元素的几何尺寸
1.获取元素的几何尺寸：(元素隐藏状态下获取不到相关信息)
- el.getBoundingClientRect()：
- 该方法返回一个对象 对象里边有 left,top,right,bottom,height,width属性
- left 和 top 代表该元素左上角的 X 和 Y 坐标
- right 和 bottom 代表元素右下角的 X和 Y 坐标
- 返回的对象里边还有属性x,y，表示元素左顶点相对于页面 body 左顶点的距离
- height和 width属性老版本的IE并未实现
注：getBoundingClientRect().width=不能设置 是错误的，因为对象里面没有单位 只能获取 要设置必须用style属性
2.获取视觉宽高：
- el.offsetWidth
- el.offsetHeight
- 可完全替代getBoundingClientRect()方法
二、BOM操作
（一）概念
BOM 是Browser object model 浏览器对象模型 ==>把浏览器功能封装到了window中 --缺乏标准 但是所有浏览器厂商制作的这个API的功能基本类似都支持
DOM 是Document object model 文档对象模型 ==>把文档的功能封装到了document中 --是W3C的标准模型
（二）window
1.window对象
- 是BOM的顶层(核心)对象 所有对象(也称为window的子对象)都是通过它延伸出来的
- 由于window是顶层对象故调用它的子对象时可以不显示的指明
window.document.write("我是window对象")
//===>等价于
document.write("我也是window对象")2.window的属性
- closed 返回窗口是否已被关闭
- document 对 Document 对象的只读引用
- history 对 History 对象的只读引用
- innerHeight 返回窗口的文档显示区的高度
- innerWidth 返回窗口的文档显示区的宽度
- outerHeight 返回窗口的外部高度，包含工具条与滚动条
- outerWidth 返回窗口的外部宽度，包含工具条与滚动条
- screenLeft 返回相对于屏幕窗口的x坐标
- screenTop 返回相对于屏幕窗口的y坐标
- screenX 返回相对于屏幕窗口的x坐标
- screenY 返回相对于屏幕窗口的y坐标
- location 用于窗口或框架的 Location 对象
- navigator 对 Navigator 对象的只读引用
- onload 指定所有配置都加载完成时(图片例外)调用的函数.
- pageXOffset 返回当前页面相对于窗口显示区左上角的 X 位置(body横向滚动的距离)
- pageYOffset 返回当前页面相对于窗口显示区左上角的 Y 位置(body纵向滚动的距离)
- screen 对 Screen 对象的只读引用
3.window的方法
- alert() 显示带有一段消息和一个确认按钮的警告框
- close() 关闭浏览器窗口
- confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框
- open(url,打开方式,新窗口配置,BOOL) 打开一个新的浏览器窗口
- print() 打印当前窗口的内容
- prompt(tishi,value) 显示可提示用户输入的对话框
- scrollBy() 按照指定的像素值来滚动内容(前提是你的有滚动条:内容够多)
- scrollTo() 把内容滚动到指定的坐标。(前提是你的有滚动条:内容够多)
- setInterval(callback,times) 按照指定的周期（以毫秒计）来调用函数
- setTimeout(callback,times) 在指定的毫秒数后调用函数
- clearInterval() 取消由 setInterval() 设置的 timeout
- clearTimeout() 取消由 setTimeout() 方法设置的 timeout
4.navigator
属性:
- appCodeName 返回浏览器的代码名
- appName 返回浏览器的名称
- appVersion 返回浏览器的平台和版本信息
- cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值
- platform 返回运行浏览器的操作系统平台
- userAgent 返回由客户机发送服务器的user-agent 头部的值
5.screen
属性:
- availHeight 返回屏幕的高度（不包括Windows任务栏）
- availWidth 返回屏幕的宽度（不包括Windows任务栏）
- height 返回屏幕的总高度
- width 返回屏幕的总宽度
- pixelDepth 返回屏幕的颜色分辨率（每象素的位数）
6.history
属性:
- length 返回访问历史列表中的网址数
- back() 加载 history 列表中的前一个 URL
- forward() 加载 history 列表中的下一个 URL
- go(number|url) 加载 history列表中的某个具体页面（负数后退,正数前进）
7.location（当前页面的url）
属性:
- hash 返回一个URL的锚部分
- host 返回一个URL的主机名和端口
- hostname 返回URL的主机名
- href 返回完整的URL
- pathname 返回的URL路径名。
- port 返回一个URL服务器使用的端口号
- protocol 返回一个URL协议
- search 返回一个URL的查询部分
方法:
- assign(url) 载入一个新的文档
- reload() 重新载入当前文档
- replace(url) 用新的文档替换当前文档
530
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
