获取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) ...
随机推荐
- iKcamp｜基于Koa2搭建Node.js实战（含视频）☞ HTTP请求
POST/GET请求--常见请求方式处理
- iOS屏幕适配（尺寸适配）
屏幕尺寸适配:一 在.pch中加入以下代码,在定义每个尺寸值的时候都调用下边的宏 //以iphone7为例 定义 view相关的宽高宏#define IPHONEHIGHT(b) [UIScreen ...
- SQL Server 服务器主体拥有一个或多个端点无法删除；错误15141
一.问题描述 当前数据库实例之前已经加入过一个域环境同时也是alwayson集群的一个副本,现在已经退出了以前的域加入一个新域,而且配置的数据库启动服务的域用户和密码和之前的一样.重新使用之前已经存在 ...
- Memcached的简介和使用
缘起: 在数据驱动的web开发中,经常要重复从数据库中取出相同的数据,这种重复极大的增加了数据库负载.缓存是解决这个问题的好办法.但是ASP.NET中的虽然已经可以实现对页面局部进行缓存,但还是不够灵 ...
- Visual Studio 我的插件
为了以后开发方便,自己记录下好用的Visual Studio 扩展 1.outline if折叠 2.Indent Guides 代码块虚线 3.CodeMaid 大文件里能够重构文件,快速定位方法. ...
- go 1.9 Beta 1
语言变化:增加了类型别名 To find out what has changed in Go 1.9, read the draft release notes: https://tip.golan ...
- Qt数据库集成应用封装
平时的大大小小的项目中,基本上都需要与数据库打交道,会遇到各种各样的应用场景,本人主要遇到四种场景1:数据库自动重连,例如mysql数据库中经常遇到服务器挂掉的情况,需要自动检测并重新连接数据库.2: ...
- python核心编写视频笔记--模块的导入
1. 模块的重新导入 有这样的一种情况:我们首先创建了一个.py文件,输入模块代码.保存后,我们进入ipython3的环境,引入这个模块.然后再ipython3环境外修改这个模块文件,在ipython ...
- jQuery实现表的编辑删除添加(增删改查)🌚
代码 : (用到了bootstrap里面的全局css样式和组件,毕竟一把梭.
- 前端之JavaScript--基础
JavaScript 独立的语言,浏览器具有js解释器 一. JavaScript代码存在形式: - Head中 <script> //javascript代码 alert(123); & ...