BOM (browers object model) 浏览器对象模型
BOM 五大对象
- window JS 在浏览器中的顶层对象，var 和 function 声明的全局函数都是挂载window的属性中
- navigator 浏览器相关信息 (浏览器型号、版本、系统版本、网络信息等)
- location 地址栏信息 (hash、search、href)
- history 历史记录 (go、back、forward)
- screen 屏幕信息 (width、height)
获取尺寸相应方法
- 获取可视区尺寸
- document.documentElement.clientWidth / document.documentElement.clientHeight
- window.innerWidth 可视区宽度
- window.innerHeight 可视区高度
- 获取页面尺寸
- document.body.scrollWidth、document.body.scrollHeight
- document.documentElement.offsetWidth、document.documentElement.offsetHeight
- 获取屏幕尺寸
- screen.width、screen.height
- 元素相关尺寸
- el.offsetWidth、el.offsetHeight 可视宽高（width/height + padding + border）
- el.offsetLeft、el.offsetTop 元素距离可视父级的距离
- el.clientWidth、el.clientHeight 元素宽高 (width/height + padding)
- el.clientLeft、el.clientTop 元素的左/上边框宽度
- el.scrollWidth、el.scrollHeight 元素内容宽高 (如果元素内容宽/高度小于元素高度时，则是元素宽/高)
- getBoundingClientRect()
- width、height 可视宽高（width/height + padding + border）
- top、bottom 元素顶/底部距离可视区顶部距离
- left、right 元素左/右部距离可视区顶部距离
scroll 监听滚动条位置发生变化
滚动条位置获取
- document.body.scrollTop||document.documentElement.scrollTop
- document.body.scrollLeft||document.documentElement.scrollLeft
- window.scrollY 获取纵向滚动条位置
- window.scrollX 获取横向滚动条位置
- window.scrollTo(x,y);
scrollHeight
滚动条高度
open 方法
window.open(URL,target,specs,replace)
1.URL 新窗口地址
2.target 属性 新窗口打开方式
_blank
_self
3.specs 新窗口规格
width=pixels 窗口的宽度.最小.值为100
height=pixels 窗口的高度。最小.值为100
location=yes|no|1|0 是否显示地址字段.默认值是yes
menubar=yes|no|1|0 是否显示菜单栏.默认值是yes
resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes
scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes
status=yes|no|1|0 是否要添加一个状态栏.默认值是yes
titlebar=yes|no|1|0 是否显示标题栏.被忽略，除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes
toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes
close 方法关闭窗口
window 下的各类弹窗
1.alert()
2.confirm('message')
3.prompt([msg],[defaultText])
居中广告弹窗demo
resize 监听窗口大小发生改变
网友评论