脚本化CSS

1.读写CSS属性

• domEle.style.prop
  • 可读写行间样式，没有兼容性问题；像float这样的关键字属性应在前面加css。
  • float --> cssFloat；
  • 复合属性必须拆解，组合单词采用小驼峰式写法
  • 写入值必须是字符串格式

2.查询计算样式

• window.getComputedStyle(ele,null)[prop]
  • 计算样式只读
  • 返回的计算样式的值都是绝对值，没有相对单位
  • IE8及其以下的版本不兼容
  • ()里第二个参数可以获取伪元素的样式

javascript <style type="text/css"> div{ width:100px; } div::after{ content: ""; width:30px; height:30px; background-color:yellow; display:inline-block; } </style> <script type = 'text/javascript'> window.getComputedStyle(ele,"after"); </script>

• ele.currentStyle[prop]
  • 计算样式只读
  • 返回的计算样式值不是经过转换的绝对值
  • IE独有的属性
• 封装获取元素样式的方法getStyle：

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