获取窗口属性，获取dom尺寸，脚本化css

查看滚动条的距离
window.pageXOffset/pageYOffset
ie8及ie8以下不兼容
document.body/document.Element.scrollLeft/scrollTop
兼容性比较混乱，用时取两个值相加，因为不可能存在两个同时有值
封装兼容性方法，求滚动轮滚动离getScrollOffset()
function getScrollOffset(){
 if(window.pageXOffset){
   return{
     x: window.pageXOffset,
     y: window.pageYOffset
 }else{
     return{
  x:document.body.scrollLeft +
   document.document.Element.scrollLeft
  y:document.body.scrollTop +
   document.document.Element.scrollTop
       }
   }
}

查看视口的尺寸
window.innerWidth/inner.Height
IE及IE8以下不兼容
document.documentElement.clientWidth/clientHeight
标准模式下，任意浏览器都兼容
document.body.clientWidth/clientHeight
适用于怪异模式下的浏览器
封装兼容性方法，返回浏览器市口尺寸getViewportOffset()
function getViewportOffset(){
if(window.innerWidth){
return{
     w : window.innerWidth,
     h  : window.innerHeight
}else{
if(document.compatMode === "BackCompat"){
return{
  w:document.body.clientWidth,
     h:document.body.clientHeight
   }else{
  return{
w: document.document.Element.clientWidth,
h: document.document.Element.clientHeight
}
}
}
 }

查看元素的几何尺寸
domEle.getBoundingClientRect();
兼容性很好
该方法返回一个对象，对象里面有left，top，right，bottom等属性。left和top代表该元素左上角的X和Y坐标，right和bottom代表元素右下角的坐标
返回的结果并不是实时的

查看元素的尺寸
dom.offsetWidth, dom.offsetHeight
查看元素的位置
dom.offsetLeft, dom.offerTop
对于无定位父级的元素，返回相对文档的坐标。对于有父级定位的元素，返回相对于最近的有定位的父级的坐标。
dom.offerParent
返回最近的有定位的父级，如无，返回body,body.offsetParent返回null

让滚动条滚动
window上有三个方法
scroll(), scrollTo() scrollBy();
三个方法功能类似，用法都是将x，y坐标传入。即实现让滚动轮到当前位置。
区别：scrollBy()会在之前的数据基础之上做累加。

<body>
<div style="~~">start</div>
<div style="~~">stop</div>
<script  type ="text/javascript">
var start = document.getElementByTagName('div')[0];
var stop = document.getElementByTagName('div')[1];
var timer = 0;
var key =true;
start.onclick = function(){
  if(key){
    timer = setInterval(function (){
    window.scrollBy(0,10);
    },100);
      key = false;
    }
  }
stop.onclick = function(){
  clearInterval(timer);
  key = true;
}

脚本化css

读写元素css属性
dom.style.prop
可读写行间样式，没有兼容性问题，碰到float这样的保留字属性，前面应加css
eg：float-->cssFloat
复合属性必须拆解，组合单词变成小驼峰写法backgroundColor div.style.width
写入的值必须是字符串格式

查询计算样式
window.getComputedStyle(ele,null);
计算样式只读
返回的计算样式的值都是绝对值，没有相对单位
IE及IE8以下不兼容
window.getComputedStyle(div,null).width
里面的null 可以换成“after” 用来查看伪元素的

查询样式
ele.currentStyle
计算样式只读
返回的计算样式的值不是经过转换的绝对值
IE独有的属性
封装兼容性方法getStyle(elem,prop)
div.currentStyle.width

fucntion getStyle(elem,  prop){
    if(window.getComputedStyle){
         return window.getComputedStyle(elem,null)[prop];
  }else{
        return elem.currentStyle[prop];
  }
}

令小木块移动

<div style="width:100px;height:100px;background-
color:red;position:absolute;left:0;top:0px;"></div>
<script type="text/javascript">
 fucntion getStyle(elem,  prop){
    if(window.getComputedStyle){
         return window.getComputedStyle(elem,null)[prop];
  }else{
        return elem.currentStyle[prop];
  }
}
var div = document.getElementByTagName('div')
[0];
var  timer = setInterval(function (){
    div.style.left = parseInt(getStyle(div,  'left')) + 1
 + 'px';
if(parseInt(div.style.left) > 500){
    clearInterval(timer);
},10);//parseInt是为了取数字，因为返回的是带单位的‘px’
</script>

获取窗口属性，获取dom尺寸 ，脚本化css

脚本化css

推荐阅读更多精彩内容

获取窗口属性，获取dom尺寸，脚本化css