获取tranform参数函数的封装
平时我们都会去获取元素的各种属性值，例如宽高等等的值！但是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参数函数的封装的更多相关文章
- js 获取url参数的值
//获取url参数函数function GetQueryString(name){ var reg = new RegExp("(^|&)"+ name +" ...
- js-特效部分学习-offsetParent、scrollHeight 、动画函数的封装
1. offsetParent 获取的最近的定位的父元素 offsetLeft/offsetTop 是相对于offsetParent的距离 offsetHeight/offsetWidth 获 ...
- JS —— 轮播图中的缓动函数的封装
轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...
- JAVA之旅（五）——this，static，关键字，main函数，封装工具类，生成javadoc说明书，静态代码块
JAVA之旅(五)--this,static,关键字,main函数,封装工具类,生成javadoc说明书,静态代码块 周末收获颇多,继续学习 一.this关键字 用于区分局部变量和成员变量同名的情况 ...
- html 跳转页面传参、点击获取DOM参数
虽然现在前端框架已经很多,尤其是几大流行框架,比如Vue,React,Angular 等,已经去DOM化,但是还是有很多公司仍在使用 HTML + CSS + JS . 这里记载一下用到的HTML传参 ...
- c#类—成员函数和封装及构造函数、析构函数、静态成员
C# 类(Class) 当您定义一个类时,您定义了一个数据类型的蓝图.这实际上并没有定义任何的数据,但它定义了类的名称意味着什么,也就是说,类的对象由什么组成及在这个对象上可执行什么操作.对象是类的实 ...
- 【转】javascript浏览器参数的操作，js获取浏览器参数
原文地址:http://www.haorooms.com/post/js_url_canshu html5修改浏览器地址:http://www.cnblogs.com/JiangXiaoTian/ar ...
- 辛巴学院-Unity-剑英陪你零基础学c#系列(四)函数和封装
辛巴学院:正大光明的不务正业. 国庆长假结束了,我的心情是这样的: 你总是起不早,起不早独自一个人沉睡到天亮你无怨无悔的梦着那副本我知道你根本就不想上班你总是起不早,起不早放假总是短暂,上班太难请个病 ...
- 学习SpringMVC——如何获取请求参数
@RequestParam,你一定见过:@PathVariable,你肯定也知道:@QueryParam,你怎么会不晓得?!还有你熟悉的他(@CookieValue)!她(@ModelAndView) ...
随机推荐
- 通过gitbub桌面工具同步
1.先创建目录,和选择路径 2.commit -> sync 3. cd ~/.ssh 查看公钥 在github 添加公钥. 4. 克隆文件git clone git@github.con:cu ...
- css em单位
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/41 为什么要有em 为了弹性布局.更准确的说是界面元素根据浏览器 ...
- 520. Detect Capital
Given a word, you need to judge whether the usage of capitals in it is right or not. We define the ...
- 某次送温暖考试的 c题
题目大意: 给定n个点的无根树,树上每个点都有一个非负的点权. 树上的路径的价值定义为树上路径的点权和-树上路径的点权最大值; 现在给定一个参数P询问有多少条路径的价值是P的倍数(注意单点也算路径,路 ...
- 扩展Microsoft Graph数据结构（开放扩展）
作者:陈希章 发表于 2018年1月2日 前言 Microsoft Graph是一张拥有巨大价值的网络,它定义了包括Office 365在内的资源的实体及其关系,它的价值体现在,随着用户积累的数据越来 ...
- JavaScript连等赋值
最近探究js原理的过程中遇到了这个挺有趣的问题. 先贴代码: var a = {n:1} a.x = a = {n:2} alert(a.x) //undefined 在弄懂这个之前,我们先普及一个知 ...
- Linux(CentOS6.5)修改默认yum源为国内的阿里云、网易yum源
官方的yum源在国内访问效果不佳. 需要改为国内比较好的阿里云或者网易的yum源 修改方式: echo 备份当前的yum源 mv /etc/yum.repos.d /etc/yum.repos.d.b ...
- js构建函数，点击按钮显示div，再点击按钮或其他区域，隐藏div
这只是一个例子,先看看效果: html代码: <nav> <span class="nav_logo"></span> <h1>云蚂 ...
- css div 细边框
.item{ max-width:48%; float:left; padding:2px; border-top:1px solid #000; border-left:1px solid #000 ...
- JavaScript函数补完：toString()
javascript中的toString()方法,主要用于Array.Boolean.Date.Error.Function.Number等对象.下面是这些方法的一些解析和简单应用,做个纪律,以作备忘 ...