平时我们都会去获取元素的各种属性值，例如宽高等等的值！但是tranform是个让人很头疼的点，获取出来的是矩阵，耐何线性代数学的并不是那么6啊。

解决方法的思路：只能采取有点取巧的方法，在我们设置的时候把它记录一下，然后在通过这个函数去获取出之前设置的transform相关的值，再也不用去依靠浏览器来知晓。

不多说，上菜。

<style type="text/css">

#box {

    width: 100px;

    height: 100px;

    background: red;

}

</style>

<script type="text/javascript">

/* 设置和获取transform相关的值 */

/*

    attr:

        rotate

        rotateX

        rotateY

        rotateZ

        scale

        scaleX

        scaleY

        skewX

        skewY

        translateX

        translateY

        translateZ    

    必须通过它设置，才可以通过它获取

*/

function setTransform(el,attr,val){

    if(!el.transform){

        el.transform = {};

        //如果元素没有这个自定义属性我们就创建一下，格式是个对象

    }

    if(typeof val == "undefined"){//如果没传val参数，说明是取值操作，则返回之前设置的对应的attr的值

        return el.transform[attr];

    } else {

        el.transform[attr] = val;//记录的值先记住或者改正

        var value = "";

        for(var s in el.transform){

            //console.log(s,el.transform[s]);

            switch(s){

                case "rotate":

                case "rotateX":

                case "rotateY":

                case "rotateZ":

                case "skewX":

                case "skewY":

                    value += (s+"("+el.transform[s]+"deg) ");

                    break;

                case "translateX":

                case "translateY":

                case "translateZ":

                    value += (s+"("+el.transform[s]+"px) ");

                    break;

                case "scale":

                case "scaleX":

                case "scaleY":

                    value += (s+"("+el.transform[s]+") ");

                    break;

            }

        }

        el.style.WebkitTransform = value;

        el.style.MozTransform = value;

        el.style.msTransform = value;

        el.style.transform = value;

    }

}

window.onload = function(){

    var box = document.querySelector('#box');

    /*

        在设置的时候去记录transform相应的值

    */

    setTransform(box,"rotate",30);

    setTransform(box,"scale",.2);

    console.log(setTransform(box,"scale"));

};

</script>

</head>

<body>

<div id="box"></div>

</body>

有个这样的函数，操作起来简直是方便多啦！

获取tranform参数函数的封装的更多相关文章

  1. js 获取url参数的值

    //获取url参数函数function GetQueryString(name){    var reg = new RegExp("(^|&)"+ name +" ...

  2. js-特效部分学习-offsetParent、scrollHeight 、动画函数的封装

    1. offsetParent  获取的最近的定位的父元素   offsetLeft/offsetTop  是相对于offsetParent的距离 offsetHeight/offsetWidth 获 ...

  3. JS —— 轮播图中的缓动函数的封装

    轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...

  4. JAVA之旅（五）——this，static，关键字，main函数，封装工具类，生成javadoc说明书，静态代码块

    JAVA之旅(五)--this,static,关键字,main函数,封装工具类,生成javadoc说明书,静态代码块 周末收获颇多,继续学习 一.this关键字 用于区分局部变量和成员变量同名的情况 ...

  5. html 跳转页面传参、点击获取DOM参数

    虽然现在前端框架已经很多,尤其是几大流行框架,比如Vue,React,Angular 等,已经去DOM化,但是还是有很多公司仍在使用 HTML + CSS + JS . 这里记载一下用到的HTML传参 ...

  6. c#类—成员函数和封装及构造函数、析构函数、静态成员

    C# 类(Class) 当您定义一个类时,您定义了一个数据类型的蓝图.这实际上并没有定义任何的数据,但它定义了类的名称意味着什么,也就是说,类的对象由什么组成及在这个对象上可执行什么操作.对象是类的实 ...

  7. 【转】javascript浏览器参数的操作，js获取浏览器参数

    原文地址:http://www.haorooms.com/post/js_url_canshu html5修改浏览器地址:http://www.cnblogs.com/JiangXiaoTian/ar ...

  8. 辛巴学院-Unity-剑英陪你零基础学c#系列(四)函数和封装

    辛巴学院:正大光明的不务正业. 国庆长假结束了,我的心情是这样的: 你总是起不早,起不早独自一个人沉睡到天亮你无怨无悔的梦着那副本我知道你根本就不想上班你总是起不早,起不早放假总是短暂,上班太难请个病 ...

  9. 学习SpringMVC——如何获取请求参数

    @RequestParam,你一定见过:@PathVariable,你肯定也知道:@QueryParam,你怎么会不晓得?!还有你熟悉的他(@CookieValue)!她(@ModelAndView) ...

随机推荐

  1. sqlserver 存储过程 递归查询分组+hierarchyid重建会员关系

    CREATE PROCEDURE [dbo].[GetGroupInfo] @s_code NVARCHAR() = --会员卡号 AS BEGIN declare @p int; --查询唯一性结果 ...

  2. 网友"就像一支烟"山寨币分析估值方法

    [注:素材取自QQ群,2017年12月28日的聊天记录."就像一支烟"分享了自己的山寨币分析估值方法.因为删去了其他人的聊天记录,部分文字可能断章取义,仅供参考,具体情况请自行分析 ...

  3. 解读JavaScript原型链

    var F = function(){}; F.prototype.a = function(){}; Object.prototype.b = function(){}; Function.prot ...

  4. iOS 单利模式实现/优缺点

    感谢此文章提供摘要: http://www.cnblogs.com/lyanet/archive/2013/01/11/2856468.html 优缺点:http://blog.csdn.net/ta ...

  5. HTML列表的常用属性及其应用

    首先列表分成有序和无序分别是<ol><ul>,无序的比较简单,看个例子: <html> <body> <h4>一个无序列表:</h4& ...

  6. bzoj 2733: [HNOI2012]永无乡

    Description 永无乡包含 n 座岛,编号从 1 到 n,每座岛都有自己的独一无二的重要度,按照重要度可 以将这 n 座岛排名,名次用 1 到 n 来表示.某些岛之间由巨大的桥连接,通过桥可以 ...

  7. JS画几何图形之三【正弦曲线】

    数学式:y=Asin(ωx+φ)+k 样例:http://www.zhaojz.com.cn/demo/draw7.html 依赖:[点].[直线] JS函数的声明: //画正弦曲线 //dot 原点 ...

  8. Selinux安全机制

    1.Selinux安全机制简介 Selinux是Google在Android 4.4上正式推出的一套以SELinux为基础于核心的系统安全机制.而SELinux则是由美国NSA(国安局)和一些公司(R ...

  9. python如何进行内存管理

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 语言的内存管理是语言设计的一个重要方面.它是决定语言性能的重要因素.无论是C语言的 ...

  10. 【原创】java NIO FileChannel 学习笔记 FileChannel 简介

    java NIO 中FileChannel 的实现类是  FileChannelImpl,FileChannel本身是一个抽象类. 先介绍FileChannel File Channels 是线程安全 ...