说在前面
上一篇文章对获取、设置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]; } }
优化点
- 核心代码没变，事件直接绑定在元素上，每一个html都拥有这个原型方法
- 调用更加方便
- 传参更加简单
使用方式
var el = document.querySelector('.abc'); el.cssTransform('translateX', 150);
