获取和设置transform值

最新推荐文章于 2023-03-27 15:01:17 发布

金大光

最新推荐文章于 2023-03-27 15:01:17 发布

阅读量2.9k

点赞数

分类专栏： JavaScript[0] 文章标签： css transform

本文链接：https://blog.csdn.net/qq_17757973/article/details/53726483

版权

JavaScript[0] 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

一个前辈写的设置css样式的方法，可以获取和设置transform的值，我稍微修改了一下
获取的时候只要传两个参数，像是下面这样

icss($("div"),"translateY");

设置的时候传三个参数

icss($("div"),"translateY","100px");

function icss(obj, attr, value){
    if(obj[0]){
        obj=obj[0];
    };
    if(arguments.length==2){
        if(attr=='scale'|| attr=='rotate'|| attr=='rotateX'||attr=='rotateY'||attr=='scaleX'||attr=='scaleY'||attr=='translateY'||attr=='translateX'||attr=='translateZ')
        {
            if(! obj.$Transform)
            {
                obj.$Transform={};
            }
            switch(attr)
            {
                case 'scale':
                case 'scaleX':
                case 'scaleY':
                return typeof(obj.$Transform[attr])=='number'?obj.$Transform[attr]:100;
                break;
                case 'translateY':
                case 'translateX':
                case 'translateZ':
                return obj.$Transform[attr]?obj.$Transform[attr]:0;
                break;
                default:
                    return obj.$Transform[attr]?obj.$Transform[attr]:0;
            }
        }
        var sCur=obj.currentStyle?obj.currentStyle[attr]:document.defaultView.getComputedStyle(obj, false)[attr];
        if(attr=='opacity'){
            return Math.round((parseFloat(sCur)*100));
        }
        else{
            return parseInt(sCur);
        }
    }
    else if(arguments.length==3)
    {
        switch(attr){
            case 'scale':
            case 'scaleX':
            case 'scaleY':
            case 'rotate':
            case 'rotateX':
            case 'rotateY':
            case 'translateY':
            case 'translateX':
            case 'translateZ':
            setCss3(obj, attr, value);
            break;
            case 'width':
            case 'height':
            case 'paddingLeft':
            case 'paddingTop':
            case 'paddingRight':
            case 'paddingBottom':
            value=Math.max(value,0);
            case 'left':
            case 'top':
            case 'marginLeft':
            case 'marginTop':
            case 'marginRight':
            case 'marginBottom':
                if(typeof value=="string")
                {
                    obj.style[attr]=value;
                }
                else
                {
                    obj.style[attr]=value+'px';
                }
                break;
            case 'opacity':
                obj.style.filter="alpha(opacity:"+value+")";
                obj.style.opacity=value/100;
                break;
            default:
                obj.style[attr]=value;
        }
    }
}
function setCss3(obj, attr, value)
{
    var sTr="";
    var sVal="";
    var arr=["Webkit","Moz","O","ms",""];
    if(! obj["$Transform"])
    {
        obj["$Transform"]={};
    }
    obj["$Transform"][attr]=parseInt(value);
    for( sTr in obj["$Transform"])
    {
        switch(sTr)
        {
            case 'scale':
            case 'scaleX':
            case 'scaleY':
            sVal+=sTr+"("+(obj["$Transform"][sTr]/100)+") ";   
            break;
            case 'rotate':
            case 'rotateX':
            case 'rotateY':
            sVal+=sTr+"("+(obj["$Transform"][sTr])+"deg) ";    
            break;
            case 'translateY':
            case 'translateX':
            case 'translateZ':
            sVal+=sTr+"("+(obj["$Transform"][sTr])+"px) ";
            break;
        }
    }
    for(var i=0;i<arr.length;i++)
    {
        obj.style[arr[i]+"Transform"]=sVal;
    }   
}