cssTransform.js（获取transfrom相关属性的值）封装函数

冷不防 2022-05-23 01:43 210阅读 0赞

需要注意的是：

如果想要使用该封装函数获取transform相关的属性，那么transform相关的设置，也必须是通过该方法设置的

使用介绍：分为取值和赋值，如果有val值，则为赋值，没有则为取值

调用：

获取transfrom相关属性的值，cssTransform(element,attr)

设置transform相关属性的值：cssTransform(element,attr,val)

参数说明：

element:要进行动画的元素

attr:运动的属性（包括scale系列，translate系列，skew系列）

val:运动的属性的值，比如30deg，100px啦等等（当然不用带单位哦）

！注意：如果attr是放大缩小（scale），我们想要放大2倍，val写为200，放大0.5倍，val写50（下面我们处理的时候会除以100）

使用如下：

cssTransform(obj,'rotate',30);

cssTransform(obj,'scale',200);//放大2倍

cssTransform.js封装函数如下

function cssTransform(element, attr, val){
    //下面分为取值和赋值阶段，如果val不存在说明是取值的，如果val存在，说明是赋值阶段
    //取值阶段
    	if(!element.transform){
    		element.transform = {};
    	}	
    	if(typeof val === "undefined"){ 
    //取值阶段，又要分为，该值已经有了，和初始化该值阶段
    		if(typeof element.transform[attr] === "undefined"){
    			switch(attr){
    				case "scale":
    				case "scaleX":
    				case "scaleY":
    				case "scaleZ":
    					element.transform[attr] = 100;
    					break;
    				default:
    					element.transform[attr] = 0;	
    			}
    		} 
    //取值完毕，返回该值
    		return element.transform[attr];
    	} else {
    //下面为赋值阶段
    		element.transform[attr] = val;
    		var transformVal  = "";
    //因为transform对象中可能不止一个属性，所以要对其进行遍历
    
    		for(var s in element.transform){
    			switch(s){
    				case "scale":
    				case "scaleX":
    				case "scaleY":
    				case "scaleZ":
    					transformVal += " " + s + "("+(element.transform[s]/100)+")";
    					break;
    				case "rotate":
    				case "rotateX":
    				case "rotateY":
    				case "rotateZ":
    				case "skewX":
    				case "skewY":
    					transformVal += " " + s + "("+element.transform[s]+"deg)";
    					break;
    				default:
    					transformVal += " " + s + "("+element.transform[s]+"px)";				
    			}
    		}
    		element.style.WebkitTransform = element.style.transform = transformVal;
    	}
    }

发表评论取消回复

表情：

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

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

相关阅读

相关 Java 获取类的属性数组 & 获取属性值 & 设置属性值

Java 获取类的属性数组 & 获取属性值 & 设置属性值一、知识点简介 1、获取类的属性数组 Field[] fields = TicketOrder

拼搏现实的明天。/ 2023年10月12日 12:31/ 0 赞/ 18 阅读

相关 Python常用函数：getattr()【获取属性值】、setattr()【设置属性值】

setattr() 函数对应函数 getattr()，用于设置属性值，该属性不一定是存在的。 setattr() 语法：`setattr(object, name, valu

r囧r小猫/ 2023年09月28日 16:11/ 0 赞/ 56 阅读

相关去除对象中的原始值属性、引用值属性值为空的属性——函数封装

在工作中，在调取接口时，经常需要往后端传递数据，如果后端那边没有对数据进行处理的话，则会因为一些空的数据导致接口调取失败。。 var obj = { "supplie

阳光穿透心脏的1/2处/ 2022年10月16日 06:24/ 0 赞/ 193 阅读

相关 JavaScript 获取属性的值

<!DOCTYPE html> <html> <head> <title>Get Elements</title> <meta

深藏阁楼爱情的钟/ 2022年07月13日 05:49/ 0 赞/ 187 阅读

相关设置或获取元素属性值的函数封装

注意：使用这个封装函数的时候，还要引入我之前封装的cssTransform函数，链接：[https://blog.csdn.net/lhjuejiang/article/d

快来打我*/ 2022年05月23日 03:52/ 0 赞/ 243 阅读

相关 cssTransform.js（获取transfrom相关属性的值）封装函数

需要注意的是：如果想要使用该封装函数获取transform相关的属性，那么transform相关的设置，也必须是通过该方法设置的使用介绍：分为取值和赋值，如果有val值

冷不防/ 2022年05月23日 01:43/ 0 赞/ 211 阅读

相关 JSON获取属性值

一.通过对象名.属性名 var obj = '{"name":"hq.zheng", "age":"18"}'; var data = eval('('+ o

痛定思痛。/ 2022年04月13日 05:15/ 0 赞/ 176 阅读

相关原生js设置属性值和获取属性值

var testEle = document.getElementById("test") testEle.setAttribute(

本是古典何须时尚/ 2022年01月22日 01:39/ 0 赞/ 350 阅读

相关封装函数获取url中的参数值

function getUrlkey(url) \{ var params = \{\}, arr = url.split("?");

深碍√TFBOYSˉ_/ 2021年09月03日 04:10/ 0 赞/ 730 阅读

相关 window.location.search 封装获取对应key的value值功能——函数封装

jq函数封装：获取url中query里面对应key的value值自从用了vue，我已经很久没有用到jq了。现在的这家公司要求做一些echart的页面，此时就需要用的jq

淩亂°似流年/ 2021年07月25日 12:35/ 0 赞/ 470 阅读