脚本化css

<style type="text/css">
      div{ 
            width:200px!important; 
            width:10em!important;
         }
         
         //3.2
         div::after{
            content:"";
            width:50px;
            height:50px;
            background-color:green;
            display:inline-block;
        }
  </style>

<div style="float:left;width:100px;height:100px;background-color:red;"></div>

<script type="text/javascript">

一.读+写元素css属性-间接控制css

dom.style.prop

var div = document.getElementsByTagName("div")[0];

可以读写行间样式，没有兼容性问题，碰到float这样的保留字属性，前面应加css。eg:float----cssFloat

复合属性应该拆解，组合单词变成小驼峰式写法

写入的值必须是字符串形式

二. 查询计算样式

1. window.getComputedStyle(ele,null);----------null的地方写的是伪元素

   计算样式只读

   返回的计算样式的值都是绝对值，没有相对单位

IE8及IE8以下不兼容

2.IE及IE8以下---查询样式：ele.currentStyle

计算样式只读 返回的计算样式的值就是写入的值，不是经过转换的绝对值

IE独有的属性

window.getComputedStyle(div,null)..//[prop属性]
div.currentStyle--->CSSStyleDeclaration;

封装兼容性方法IE8及以下-getStyle(elem,prop);

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

3.2window.getComputedStyle(ele,null);----------把伪元素样式取出来-不常用

var div = document.getElementsByTagName("div")[0];