平时我们都会去获取元素的各种属性值，例如宽高等等的值！但是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. js、jquery实现模糊搜索功能

    模糊搜索功能在工作中应用广泛,并且很实用,自己写了一个方法,以后用到的时候可以直接拿来用了! 实现的搜索功能: 1. 可以匹配输入的字符串找出列表中匹配的项,列表框的高度跟随搜索出的列表项的多少改变 ...

  2. JavaSe：代码块执行顺序

    //执行顺序:(优先级从高到低.)静态代码块>mian方法>构造代码块>构造方法. 其中静态代码块只执行一次.构造代码块在每次创建对象是都会执行. //普通代码块:在方法或语句中出现 ...

  3. 导入maven项目时出现 Version of Spring Facet could not be detected. 解决方法

    问题出现在: 导入maven项目的时候,其中,我的这个maven项目是由Spring,Struts2,Mybatis搭建的. 问题截图:  即Spring的版本不能被检测到.此时需要做的就是找到spr ...

  4. CRL快速开发框架升级到4.52,谈谈开发过程中的优化

    CRL4.5版本已经稳定使用于目前的几个中型项目中,在实际使用中,也发现了不少问题,这些问题都在4.52中提交 CRL具体功能和使用请浏览 CRL快速开发框架系列教程 由于现在项目是一套业务系统,查询 ...

  5. 原生js版分页插件

    之前我在自己的博客里发表了一篇用angularJs自定义指令实现的分页插件,今天简单改造了一下,改成了原生JavaScript版本的分页插件,可以自定义一些简单配置,特此记录下来.如有不足之处,欢迎指 ...

  6. Web服务器、应用服务器、Web容器、反向代理服务器区别与联系

    作者: 帅虫哥 出处:www.cnblogs.com/vipyoumay/p/7455431.html(点击尾部阅读原文前往) 我们知道,不同肤色的人外貌差别很大,而双胞胎的辨识很难.有意思的是Web ...

  7. while，until

    while ] 注释:中括号写的条件判断式中不能用<.=.>这类符号,要用-lt.-eq.-gt这类符号,且变量前要用$来取值 do sum=$(($sum+$i)) i=$(($i+)) ...

  8. 历史命令~/.bash_history，查看所有别名alias，命令执行顺序，命令行常用快捷键，输入输出重定向，wc统计字节单词行数

    历史命令大小:/etc/profile中字段HISTSIZE=1000 历史命令保存文件:~/.bash_history history -c 清空历史命令 history -w 把历史命令写入~/. ...

  9. DataBase MongoDB高级知识-易使用

    MongoDB高级知识-易使用 mongodb是一个面向文档的数据库,而不是关系型数据库.不采用关系模型主要是为了获取更好的扩展性.当然还有其他的一些好处. 与关系型数据库相比,面向文档的数据库不再有 ...

  10. Python3 学习Python流程--试水中

    二.基础语法之后可以搭载服务器练习: 教程 一.1.Python 搭建环境. 初学基本语法 :Python基本语法 2.推荐 IDE :  PyCharm CE 下载 菜鸟教程都是基础语法,可以对py ...