获取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) ...
随机推荐
- ajaxFileUpload上传文件简单示例
写在前面: 上传文件的方式有很多,最近在做项目的时候,一开始也试用了利用jquery的插件ajaxFileUpload来上传大文件,下面,用一个上传文件的简单例子,记录下,学习的过程~~~ 还是老样子 ...
- 【CSS3】边框
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 用于文件系统的C库函数
9/20/2017 学<LINUX C编程实战>中 1.打开 File *fopen(const char *path , const char * mode); fopen实现打开指定的 ...
- bzoj 2298: [HAOI2011]problem a
Description 一次考试共有n个人参加,第i个人说:"有ai个人分数比我高,bi个人分数比我低."问最少有几个人没有说真话(可能有相同的分数) Input 第一行一个整数n ...
- sql server 2012 新知识-序列
今天聊一聊sql 2012 上的新功能-----序列 按我的理解,它就是为了实现全局性的唯一标识,按sql server 以前的版本,想对一张表标识很简单,比如identity,但如果要对某几张有业务 ...
- centos7 部署dns服务器
=============================================== 2017/12/6_第2次修改 ccb_warlock 20 ...
- WebDriver API 大全
访问某网页地址:driver.get(url) 或 driver.navigate().to(url) 访问上一个访问的网页(模拟单击浏览器的后退按钮)driver.navigate().back ...
- 【原创】java NIO selector 学习笔记 一
能力有限,仅仅是自己看源码的一些笔记. 主要介绍 可选通道 和 选择器 选择键(SelectableChannel 和 Selector SelectionKey) 选择器(Selector) 选择 ...
- 中文代码示例之Angular入门教程尝试
原址: https://zhuanlan.zhihu.com/p/30853705 原文: 中文代码示例教程之Angular尝试 为了检验中文命名在Angular中的支持程度, 把Angular官方入 ...
- Ubuntu下LAMP环境配置
接下来是搭建个人学习环境,之前的随笔介绍了个人的网络配置,简单记录一下. 1. 安装apache: apt-get install apache2 2. 安装php5:apt-get install ...