------------------------------------盒子模型常用的八个属性---------------------------------
Js盒子模型
Js盒子模型指的是通过js提供的一系列的属性和方法，获取页面中元素的样式信息值
client系列(当前元素的私有属性)
clientWidth/clientHeight:内容的宽度/高度+左右/上下填充，（和内容溢出没有关系）
clientLeft:左边框的宽度(borderLeftWidth)
clientTop:上边框的高度(borderTopWidth)
//真实的内容宽度和高度其实不是这样的，真实的高度是要把溢出的高度也要加进来
offset系列
offsetHeight/offsetWidth:clientWidth/clientHeight+左右边框/上下边框(和内容溢出没有关系)
offsetParent:当前元素的参照物
offsetLeft/offsetTop:当前元素的外边框距离父级参照物的偏移量
scroll系列
1、内容有溢出
scrollWidth/scrollHeight 内容没有溢出的情况下和clientWidth/clientHeight一模一样
2、内容没有溢出：
如果容器中内容有溢出我们获取的内容以下规则：
scrollWidth：真实内容的宽度(包含溢出)+左填充
scrollHeight：真实内容的高度(包含溢出)+上填充
获取到的结果都是‘约’等于的值,不同的浏览器结果也是不同的，设置overflow: hidden;有影响，在不同的浏览器中我们获取到的结果是不相同的
scrollLeft/scrollTop滚动条卷去的宽度/高度
关于浏览器本身盒子模型信息
clientWidth/clientHeight当前浏览器可视窗口的高度和宽度（一屏）
scrollWidth/scrollHeight当前页面真实的宽度和高度（所有屏的宽度和高度，是一个约等于的值）
不管是哪些属性，也不管是什么浏览器，不管是设置还是获取，想要兼容都写两套
获取
document.documentElement[attr]||document.body[attr]
设置
document.documentElement.scrollTop=0;
document.body.scrollTop=0;
编写一个有关于操作浏览器盒子模型的方法
如果只传递了attr没有传递value，默认的意思是获取样式值
如果两个参数都传递了，意思是设置某一个样式属性值
设置、获取浏览器的宽度和高度
function win(attr,value){
if(typeof value=='undefined'){
return document.documentElement[attr]||document.body[attr];
}
document.documentElement[attr]=value;
document.body[attr]=value;
}
获取可视宽：win(“clientHeight”)
设置值：win(“scrollTop,0”)
----------------获取元素的具体样式信息值以及Js兼容检测三种方式--------------
以上获取的都是组合样式值，如果想获取某一个具体的属性值两种方式：
1、元素.style.属性名（需要我们把所有的样式写在行内样式才可以）（真实项目中不常用）（无法实现css和html的分离）
2、使用window.getComputedStyle这个方法获取所有经过浏览器计算过的样式（只要当前的元素标签可以在页面中呈现出来，那么它所有的样式都是经过浏览器计算过的，哪怕样式没有写也可以获取到）
window.getComputedStyle ----->function getComputedStyle()
window.getComputedStyle（当前要操作的元素对象,当前元素的伪类一般写null）
获取的结果是是经过浏览器计算过，是CSSStyleDeclaration这个类的实例，这个实例包含了当前元素的所有样式属性值
Js兼容检测三种方式 1、try catch 使用try catch处理兼容，消耗性能，不得已的情况下使用不是最优的方式
function getcss(obj, attr) {
var val = null;
try {
val = window.getComputedStyle(obj)[attr];
} catch (e) {
val = obj.currentStyle[attr];
}
return val;
}
2、判断浏览器中是否存在这个属性或方法，存在就兼容，不存在就不兼容 （最优）
function getcss(obj,attr){
var val=null;
if("getComputedStyle" in window){//判断某一个属性是否属于这个对象
val=window.getComputedStyle(obj)[attr];
}else{
val=obj.currentStyle[attr];
}
return val;
}
3、根据浏览器的版本来处理兼容
function getcss(obj,attr){
var val=null;
//判断某一个属性是否属于这个对象
if(!/MSIE(6|7|8)/.test(window.navigator.userAgent)){
val=window.getComputedStyle(obj)[attr];
}else{
val=obj.currentStyle[attr];
}
return val;
}
升级getcss()，部分去掉样式的单位
function getcss(obj,attr){
var val=null;
var reg=null;
if("getComputedStyle" in window){
val=window.getComputedStyle(obj,null)[attr];
}else{
val=obj.currentStyle[attr];
}
reg=/^(-?\d+(\.\d+)?)(px|rem|em)$/i;
return reg.test(val)?parseFloat(val):val;
}
标准浏览器和IE浏览器获取的结果是不一样的----->对于部分样式属性，不同浏览器获取的结果不一样，主要是由于getComputedStyle和currentStyle在某些方面不一样
获取复合型值的时候，比如border等需要拆开了来获取，会避免获取不到的问题
---------------------------浏览器滚动条卷去的高度scrolltop------------------------
1、只读的属性
client系列offset系列scrollWidth/scrollHeight都是只读的属性
2、可以设置值的属性
box.scrollTop=0直接回到了容器的顶部
我们的scrollTop的值是存在边界值的（最大值和最小的值的），最小是0，
最大是box.scrollHeight-box.clientHeight
------------------------------------------------获取元素的偏移量-----------------------------------------------------
盒子模型案例分析offsetParent和offsetLeft/offsetTop 的特点
parentNode：父节点
var outer=document.getElementById('outer');
var inner=document.getElementById('inner');
var center=document.getElementById('center');
// console.log(center.parentNode);
// console.log(document.body.parentNode);
// console.log(document.documentElement.parentNode);
// console.log(document.parentNode);
// console.log(document.aa);
Null和undefined都代表没有，但是null是值不存在，undefined是连这个属性都不存在
offsetParent：父级参照物，在同一个平面中，最外层的元素是里面所有的父级参照物（和HTML层级结构没有必然的联系）
一般来说一个页面中所有元素父级参照物都是body
center/inner/outer.offsetParent ----->body
document.body.offsetParent //body是平面中的顶级是没有父级参照物的
想要改变父级参照物需要脱离当前平面，需要通过position定位来进行改变
position: relative;
position: absolute;
position: fixed;
position: static;
position:inherit;
absolute、relative、fixed任意一个值都能把父级参照物修改
offsetTop/offsetLeft：当前元素(外边框)距离其父级参照(内边框)物偏移距离
思考：不管center的父级参照物是谁，获取其距离body的左偏移？
1、首先加上自己本身的左偏移
2、获取自己的父级参照物（xx）把xx的左边框和左偏移加上
3、基于当前的xx向上找父级参照物，找到后依然是累加边框和其左偏移
4、一直找到父级参照物为null，一直找到body
Offset()：和jq中的offset()方法相同，实现获取页面中任意一个元素，距离body的偏移（包含左偏移和上偏移）,不管当前的父级参照物是谁。
在标准的ie8浏览器中我们使用offsetLeft/offsetTop其实是是把父级参照物的边框已经算在内了，所以我们不需要自己再单独加边框
function offset(curEle) {
var totalleft = null;
var totaltop = null;
var par = curEle.offsetParent;
// 累加本身
totalleft += curEle.offsetLeft;
totaltop += curEle.offsetTop;
// 只要没有找到body就把父级参照物的边框和偏移进行累加
while (par) {
// 不是ie8就累加边框
if(window.navigator.userAgent.indexOf('MSIE 8.0')==-1){
//累加父级参照物的边框
totalleft+=par.clientLeft;
totaltop+=par.clientTop;
}
//累加父级参照物的偏移
totalleft+=par.offsetLeft;
totaltop+=par.offsetTop;
par=par.offsetParent;
}
return{
left:totalleft,
top:totaltop
}
}
作业：
1、点击滑动到文档开始
2、图片无缝滚动
3、文字上下/左右无缝滚动
4、手风琴效果
5、轮播
--------------------------------------------js同步与异步编程------------------------------------
Js是单线程------->可以想象它是一根筋，做着当前的这件事情，没有完成之前绝对不会做下一件事情
Js中的两种编程思想：同步和异步编程
同步编程------->只有上一件事情没有完成，继续处理上一件事情，只有上一件事情完成了，才会说做下一件事情（js中大部分是同步编程的）
异步编程：规划做一件事情，但是不是当前立马去执行这件事情，需要等待一定的时间，这样的话，我们不会等着他执行，而是继续执行下面的操作，只有当下面的事情都处理完成了，才会返回头处理之前的事情，如果下面的事情并没有处理完成，不管之前的事情有没有到时间，都会踏踏实实的等它执行完。
在js中异步编程只有四种情况：
1、定时器都是异步编程
2、所有的事件绑定都是异步编程的
3、Ajax读取数据的时候
4、回调函数也是异步编程
每一个浏览器对于定时器的等待时间都有一个最小值，谷歌是5~6ms,IE10~14ms，如果设置的等待时间小于这个值不起作用，还是需要等待最小的时间才执行的，尤其是写0也不立即执行
网友评论