函数：js设置或获取transform相关属性

最新推荐文章于 2024-11-28 08:52:38 发布

QHQLemon

最新推荐文章于 2024-11-28 08:52:38 发布

阅读量3.1k

点赞数

分类专栏：积累文章标签： transform

本文链接：https://blog.youkuaiyun.com/weixin_38022998/article/details/103437629

版权

积累专栏收录该内容

2 篇文章

订阅专栏

这篇博客主要讨论了在JavaScript中如何设置或获取元素的transform属性。文章指出，通过dom.style.transform只能获取行内样式定义的transform，而window.getComputedStyle(dom).transform可以获取包括matrix3d()在内的完整样式。作者还提供了一个封装的函数，但该函数只适用于通过该函数自身设置的transform属性，对于其他方式设置的属性，将返回默认值。建议只用此函数进行transform属性的设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

transfrom的获取：

使用dom.style.transform只能获取行间设置的transform
使用window.getComputedStyle(dom).transform获取matrix3d()

封装函数：

    const myTransform = (ele, attr) => {
        // ele: dom元素, attr: 字符串 / 对象

        // 存储transform
        let transformArr = ['rotate', 'rotateX', 'rotateY', 'rotateZ',
                            'translate', 'translateX','translateY','translateZ',
                            'scale', 'scaleX','scaleY',
                            'skew', 'skewX', 'skewY']

        // 1.判断attr是否为对象 => 获取属性值还是设置属性
        const getOrSet = (a) => {
            if(Object.prototype.toString.call(a) == '[object Object]'){
                return true;
            }
            return false;
        }

        const transform = (transArr) => {
            //ele.transform = {}  存储调用该方法设置过的transform相关属性

            if(!ele.transform){
                ele.transform = {}; //第一次
            }

            if(!getOrSet(attr)){ //获取transform相关属性
                if(!Object.keys(ele.transform).includes(attr)){//从未调用该方法设置过，返回默认值
                    if(['scale', 'scaleX', 'scaleY'].includes(attr)){
                        return 1;
                    }else{
                        return 0
                    }
                }
                return ele.transform[attr];
            
            }else{ //设置transform相关属性

                // 保存属性
                for(let v of transArr){
                    ele.transform[v] = attr[v];
                }

                //拼接属性值及单位  rotate/skew: deg   translate: px   scale: 无
                let str = '';
                for(let v of transArr){
                    switch(v){
                        case 'rotate':
                        case 'rotateX':
                        case 'rotateY':
                        case 'rotateZ':
                        case 'skew':
                        case 'skewX':
                        case 'skewY':
                            str += v + `(${ele.transform[v]}deg) `;
                            break;
                        case 'translate': 
                        case 'translateX': 
                        case 'translateY': 
                        case 'translateZ':                                 
                            str += v + `(${ele.transform[v]}px) `;
                            break;
                        case 'scale':
                        case 'scaleX':
                        case 'scaleY':
                            str += v + `(${ele.transform[v]}) `;
                            break;
                    }
                }
                ele.style.transform = str;
            }

            
        }

        if(!getOrSet(attr) && transformArr.includes(attr)){  //获取并且为transform相关属性
            return transform();
        }else{
            // 设置
            const attrKeys = Object.keys(attr);
            //过滤掉transform相关以外的属性
            arr = attrKeys.filter((item) => {
                return transformArr.includes(item)
            })
            
            // console.log(attr, attrKeys, arr);

            transform(arr)
        }

缺点：该函数只能获取利用该函数设置过的transform相关属性，否则返回默认值，所以建议只使用该方法设置transform相关属性

控制台测试：