cssTransform.js 優化版二

說在前面

上一篇文章對獲取、設置transfrom相關屬性做了一個簡單的封裝（上一篇文章 鏈接：cssTransform.js1.0 方案）
代碼還是比較 low 的，所以優化一個版本。

HTMLElement.prototype.cssTransform = function (prop, value) {
    var transform,
        transformValue = "";
    if (this.transform === undefined) {
        this.transform = transform = Object.create(null);
    }
  
    if (value !== undefined) {
        this.transform[prop] = value;
        transform = this.transform;
        for (var name in transform) {
            switch (name) {
                case "scale":
                case "scaleX":
                case "scaleY":
                    transformValue += " " + name + "(" + transform[name] + ")";
                    break;
                case "rotate":
                case "rotateX":
                case "rotateY":
                case "rotateZ":
                case "skewX":
                case "skewY":
                    transformValue += " " + name + "(" + transform[name] + "deg)";
                    break;
                default:
                    transformValue += " " + name + "(" + transform[name] + "px)";
            }
        }
        this.style.WebkitTransform = this.style.transform = transformValue;
    } else {
        return this.transform[prop];
    }
}

優化點

1. 核心代碼沒變，事件直接綁定在元素上，每一個html都擁有這個原型方法
2. 調用更加方便
3. 傳參更加簡單

使用方式

var el = document.querySelector('.abc');
el.cssTransform('translateX', 150);