BOM
Browser Object Model:
定义了操作浏览器的接口
BOM对象
Window,History,Navigator,Screen,Location等
由于浏览器厂商不同,BOM对象的兼容性极低。一般情况下只有其中部分功能可用。
windows对象
浏览器对象模型(BOM :Browser Object Model)是JavaScript的组成之一,它提供了独立于内容与浏览器窗口进行交互的对象,使用浏览器对象模型可以实现与HTML的交互。它的作用是将相关的元素组织包装起来,提供给程序设计人员使用,从而降低开发人员的劳动量,提高设计Web页面的能力。
BOM基本操作
查看滚动条的滚动距离
window.pageXOffset/pageYOffset window上的两个属性,单位像素
该操作部分IE9,全部IE8及IE8以下不兼容
document.body/documentElement.scrollLeft/scollTop
部分IE9,全部IE8及IE8以下使用 其中之一为0,另一个有效
所以通常我们会把他们加起来用
如:document.body.scrollLeft+document.documentElement.scrollLeft
封装方法
function getScrollOffset() {
if(window.pageXOffset) {
return { //一定要这样,不能把大括号换到下一行,因为如果换到下一行系统会在最后没有逻辑符号的语句上自动加上分好,那么返回的就是undefined
x : window.pageXOffset,
y : window.pageYOffset
}
}else{
return {
x : document.body.scrollLeft + document.documentElement.scrollLeft,
y : document.body.scrollTop + document.documentElement.scrollTop
}
}
}
查看可视区窗口的尺寸(简单的说就是html文档编辑部分)
window.innerWidth/innerHeight
IE8及IE8以下不兼容 , window上的两个属性,单位像素
document.documentElement.clientWidth/clientHeight 标准模式下,任何浏览器兼容
document.body.clientWidth/clientHeight 适用于不标准模式下的浏览器
什么是标准模式?《!DOCTYPE html》有为标准模式,没为非标准(混杂/怪异)模式
(向后兼容,兼容前面版本的语法) 这个东西也叫DTD 这个为h5的DTD
封装方法
function getViewportOffset() {
if(window.innerWidth)
return{
w : window.innerWidth,
h : window.innerHeight
}
}else{
if(document.compatMode === "BackCompat") {//该方法是查看document属性compatMode来判断是否属于怪异模式,如果是会返回"BackCompat"向后兼容
return {
w : document.body.clientWidth,
h : document.body.clientHeight
}
}else{
return {
w : document.documentElement.clientWidth,
h : document.documentElement.clientHeight
}
}
}
查看元素的几何尺寸
domEle.getBoundingClientRect();
任何dom元素都可以调用,兼容性很好,该方法返回一个对象,
对象中有left,top,right,bottom等属性。left和top代表该元素
左上角的X和Y坐标,right和bottom代表元素右下角的X和Y坐标
height和width属性老版本IE并未实现 但我们可以通过right-left ,top-bottom计算得出
返回的结果并不是实时的,是静态的
dom.offsetWidth,dom.offsetHeight
这两个属性完爆上面的方法,查看元素的尺寸,算上padding
想真正求内容区div.style.width/height
dom.offsetLeft , dom.offsetTop
查看元素的位置,对于无定位父级元素,返回相对文档的坐标。
对于有定位父级的元素,返回相对于最近的有定位的父级坐标
dom.offsetParent
返回最近的有定位的父级,如无,返回body(最外层),body.offsetParent 返回null
注意:横向body本身有8px边距,纵向会有这8px的margin塌陷问题
封装方法
function getElementPosition() {
}
让滚动条滚动
window上有三个方法
scroll(x,y) 滚到x轴的x距离,滚到y轴的y距离
scrollTo(x,y) 滚到x轴的x距离,滚到y轴的y距离(不叠加)【展开功能】
scrollBy(x,y) 滚x轴的x距离,滚y轴的y距离(可叠加)【小说自动滑动】
脚本化(控制)css
读写元素css属性
dom.style.prop
可读写行间样式,没有兼容性问题,
碰到float这样的保留字属性,前面应加上css并大写第一个字母如:cssFloat
复合属性必须拆解,组合单词变成小驼峰式写法
写入值必须是字符串格式
dom.style
返回一个CSSStyleDeclaration对象(CSS样式表声明),这里有该dom元素的所有能用的css
查询计算样式
window.getComputedStyle(element,null)[prop]
注意:他的第二个参数是获取伪元素样式表如:window.getComputedStyle(div,"after")
window.getComputedStyle()返回一个CSSStyleDeclaration对象(CSS样式表声明)
计算样式,读出最后的计算结果即显示结果,只读
返回的计算样式的值都是绝对值,没有相对单位
IE8 以及 IE8以下不兼容
element.currentStyle()返回一个CSSStyleDeclaration对象(CSS样式表声明)
计算样式只读
返回的计算样式的值不是经过转换的绝对值
IE独有属性
封装方法
function getStyle (element,prop) {
if(window.getComputedStyle) {
return window.getComputedStyle(element,null)[prop];
}else{
return element.currentStyle[prop];
}
}