BOM和脚本化css

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];
		}
	}

页面加载完毕

 onload=function () {


  };

页面关闭后才触发的事件

window.onunload=function () {

};

页面关闭之前触发的

window.onbeforeunload=function () {
      
    };

location对象

//    location对象
//    console.log(window.location);
//    地址栏上#及后面的内容
//    console.log(window.location.hash);
//    //主机名及端口号
//    console.log(window.location.host);
//    //主机名
//    console.log(window.location.hostname);
//    //文件的路径---相对路径
//    console.log(window.location.pathname);
//    //端口号
//    console.log(window.location.port);
//    //协议
//    console.log(window.location.protocol);
//    //搜索的内容
//    console.log(window.location.search);
//设置跳转的页面的地址
//location.href="http://www.jd.com";//属性----------------->必须记住
//location.assign("http://www.jd.com");//方法
//刷新
//location.reload();//重新加载--刷新属性
//location.replace("http://www.jd.com");//没有历史记录，刷新方法

history对象

//前进
window.history.forward()
window.history.back()
window.history.go()//看参数的正负

navigator对象

    //通过useragent可以判断用户浏览器的类型
    //console.log(window.navigator.useragent);
    //通过platform可以判断浏览器所在的系统平台类型.
    //console.log(window.navigator.platform);