指令碼化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];
        }
    }