cssTransform.js 优化版二

落日映苍穹つ 2023-06-26 03:22 2阅读 0赞

> 说在前面

上一篇文章对**获取、设置transfrom相关属性**做了一个简单的封装（上一篇文章 链接：[cssTransform.js1.0 方案][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);

[cssTransform.js1.0]: https://blog.csdn.net/qq_35942348/article/details/103633003

发表评论取消回复

表情：

评论列表（有 0 条评论，2人围观）

还没有评论，来说两句吧...

相关阅读

相关扫雷游戏（优化版）

![93aa8de871a34c98a160199a1867ee9c.png][] -------------------- 目录实现扫雷游戏：第一步：具体操作

客官°小女子只卖身不卖艺/ 2023年10月14日 12:41/ 0 赞/ 38 阅读

相关索引优化(二)

在上一篇[《索引优化(一)》][Link 1]的文章中，已经介绍了联合索引、索引下推、排序分组和文件排序的优化策略，还介绍了如果通过`trace`工具来查看MySQL选择执行方

╰半橙微兮°/ 2023年09月29日 12:43/ 0 赞/ 190 阅读

相关 cssTransform.js 优化版二

> 说在前面上一篇文章对获取、设置transfrom相关属性做了一个简单的封装（上一篇文章链接：[cssTransform.js1.0 方案][cssTransform.

落日映苍穹つ/ 2023年06月26日 03:22/ 0 赞/ 3 阅读

相关 jenkinsFile harbor docker优化版

node { //study-center def mvnHome = tool name: 'maven', type: 'maven

叁歲伎倆/ 2023年06月03日 04:00/ 0 赞/ 41 阅读

相关堆优化版Dijkstra算法

上一篇博客：[朴素Dijkstra算法][Dijkstra] > 写在前面：大家好！我是`AC-fun`,我的昵称来自两个单词`Accepted`和`fun`。我是一个热爱

系统管理员/ 2022年11月06日 08:53/ 0 赞/ 182 阅读

相关冒泡排序优化版

上一篇我们讲了冒泡排序，它需要重复的走过所有元素，并需要进行比较，直到没有交换的元素，这样导致，在很多情况下效率比较低下。比如【1，2，5，8，9，10，11，14，13】这

偏执的太偏执、/ 2022年10月02日 10:41/ 0 赞/ 218 阅读

相关 python期末版二版-习题题库

《Python程序设计》题库一、填空题 1、 Python安装扩展库常用的是\_工具。（pip） 2、 Python标准库math中用来计算平方根的函数是\_\_

刺骨的言语ヽ痛彻心扉/ 2022年05月22日 09:54/ 0 赞/ 240 阅读

相关 python期末版二版-习题题库

分享一下我老师大神的人工智能教程！零基础，通俗易懂！[http://blog.csdn.net/jiangjunshow][http_blog.csdn.net_jiangju

﹏ヽ暗。殇╰゛Y/ 2022年04月16日 00:26/ 0 赞/ 206 阅读

相关 MySQL优化（二）

1、建立基础索引:在where,order,join字段上建立索引优化，组合索引：基于业务逻辑前缀索引使用上与普通索引一致! 2、索引的存储结构：Btree索引，

末蓝、/ 2021年12月10日 14:45/ 0 赞/ 317 阅读

相关 MySQL 优化（二）

7.2.1 `EXPLAIN` 语法（得到`Select` 的相关信息） EXPLAIN tbl_name 或者: EXPLAIN Select

太过爱你忘了你带给我的痛/ 2021年09月10日 03:56/ 0 赞/ 370 阅读