获取窗口属性，获取dom尺寸，脚本化css(下)--读写css属性--查询计算样式--让方块运动小程序

一，读写元素css属性  --只有通过这个style才可以间接写入  --可读可写---只能获取行间属性--返回的是style的行间样式属性，不会按权重返回

dom.style.prop  比如dom.style.width
可读写行间样式，没有兼容性问题，碰到float这样的保留字属性，前面应加css
例如float--->cssFloat
复合属性必须拆解(比如border有很多值建议写成borderWidth)，组合单词变成小驼峰写法，写入的值必须是字符串

二，查询计算样式----返回的是按权重的大小来返回

1.window.getComputedStyle(ele,null) ele就是dom元素
比方说一个div标签用var div = document.getElementsByTagName('div')[0];选中他
然后调用window.getComputedStyle(div,null)会返回div的样式表，想要设置就例如.width
1.1还可以查询伪元素的样式window.getComputedStyle(ele,"after");
2.计算样式只读
3.返回的计算样式的值都是绝对值，没有相对单位(例如width:10em;他返回的是最后计算的px)
4.IE8及IE8以下不兼容
不兼容解决办法
查询样式
ele.currentStyle  例如div.currentStyle.width;
计算样式只读
返回计算样式的值不是经过转换的绝对值
IE独有的属性

三，封装兼容性方法getStyle(elem,prop)  --传参getStyle(div,'width');

 var div = document.getElementsByTagName('div')[0];
   function getStyle(elem,prop){
       if(window.getComputedStyle){
           return window.getComputedStyle(elem,null)[prop];
       }else{
           return elem.currentStyle[prop];
       }
   }

四，让方块运动小程序  ----利用getStyle方法计算出左边距离然后让他每次加一个数

 <div style="width:100px;height:100px;position:absolute;background-color:yellow;left:0px;"></div>
  <script>
     var div = document.getElementsByTagName('div')[0];
     function getStyle(elem,prop){
       if(window.getComputedStyle){
           return window.getComputedStyle(elem,null)[prop];
       }else{
           return elem.currentStyle[prop];
       }
    }
    setInterval(function(){
        div.style.left=parseInt(getStyle(div,'left')) + 10 +'px';
        if(parseInt(div.style.left)>500){
            clearInterval(1);
        }
    },100)
</script>