浅谈javascript获取元素transform参数


Posted in Javascript onJuly 24, 2015

之前写页面的时候有试过想用js获取某些元素的translate的数值什么的,但是translate又是transform的子样式(勉强说说),理所当然就是先获取transform样式,再读里面的值。

body{-webkit-transform: translateX(20px);}

但当我尝试这样做的时候,奇迹出现了:

浅谈javascript获取元素transform参数

当时我的内心几乎是崩溃的,我只想安安静静的获取translate的值而已啊,谁知给我弹出这货,虽然上高数课的时候也有讲到所有变化(二维、三维)效果都可以浓缩在一个矩阵里面的,但如果要逆向解析矩阵得到我想要的值就不是这么简单了。

一次偶然的机会,我再次想用js获取translate的值,这次的结果出乎意料:

浅谈javascript获取元素transform参数

看到这一幕,简直是泪如雨下,虽然不能直接就得到我要的值,但是拿正则匹配一下就可以了。

你是不是以为是jq做了手脚?其实不然,我比对了一下,发现两次body样式的写法是不一样的:

第一次:

body{-webkit-transform: translateX(20px);}

第二次:

<body style='-webkit-transform: translateX(20px);'></body>

没错,第一次是通过css设置,第二次是通过body的style属性设置的,按照我的理解,css和style属性虽然都可以对页面元素进行渲染,但是两者的地位是不一样的。(以下含推测成分)

当页面加载时,css和style对渲染树产生了作用,都会影响元素的变现,不同的地方在于style是元素的属性,用户设置了什么就应该保存什么,就想一个烙印深深烙在了特定元素上,所以当body通过style设置‘-webkit-transform'时,我们可以通过document.body.style.webkitTransform 原样获取设置的值。也许你会有疑问,那直接获取css设置的值不就好了嘛。但我觉得这是做不到的(除去解析css文件的方法),因为css文件被加载完,形成渲染树后它的任务就完成了,css和style所产生的最终对元素进行渲染的规则都可以通过window.getComputedStyle(element) 找到。通过这个方法我们可以看到,transform最终产生的渲染规则是以矩阵maxrix(x,x,x,x,x)的形式保存的(也许是方便计算机的运算),

浅谈javascript获取元素transform参数

这就解释了为什么$('body').css('-webkit-transform') 这货会返回矩阵了,而且也看出了$().css()方法是从浏览器最终渲染规则中返回结果的(就是window.getComputedStyle(element)),所以它是读取不了你的css设置参数的,而且当你用$().css()给元素设置样式时,其实它是通过设置元素style属性(内联)设置的,试试你就知道了。虽然这个$().css()有‘css'字样,但是它和‘css文件'没有半毛钱关系,或许这就能证明上面我说的:‘不能直接获取css设置的值'吧。

总结:

1.css和style共同作用渲染树,且style设置的值会原样保存为元素的style属性的子属性,最终渲染规则可以通过window.getComputedStyle(element) 找到

2.jq$().css()方法获取的是最终渲染规则,设置的是style属性(内联样式)

建议:

1.当我们需要实时获取并修改元素transform各参数的时候(例如用translate实现各种滑动效果),应该把transform设置成元素的内联属性(通过style设置),这样方便读取

2.矩阵虽吓人,但若不想成为平凡的页面仔,还是需要搞懂

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
jquery选择器使用详解
Apr 08 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
2种在vue项目中使用百度地图的简单方法
Sep 28 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
Dec 10 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
Oct 16 jQuery
Vue如何提升首屏加载速度实例解析
Jun 25 Javascript
vue+Element-ui前端实现分页效果
Nov 15 Javascript
js+html+css实现手动轮播和自动轮播
Dec 30 Javascript
element-ui 弹窗组件封装的步骤
Jan 22 Javascript
js实现汉字排序的方法
Jul 23 #Javascript
javascript实现全角半角检测的方法
Jul 23 #Javascript
javascript比较两个日期相差天数的方法
Jul 23 #Javascript
jquery实现简单的轮换出现效果实例
Jul 23 #Javascript
jquery实现简单实用的打分程序实例
Jul 23 #Javascript
javascript实现框架高度随内容改变的方法
Jul 23 #Javascript
js正则表达式中exec用法实例
Jul 23 #Javascript
You might like
php重定向的三种方法分享
2012/02/22 PHP
php多用户读写文件冲突的解决办法
2013/11/06 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
PHP+swoole+linux实现系统监控和性能优化操作示例
2019/04/15 PHP
jquery UI 1.72 之datepicker
2009/12/29 Javascript
JavaScript 对象模型 执行模型
2010/10/15 Javascript
关于js注册事件的常用方法
2013/04/03 Javascript
JS命名空间的另一种实现
2013/08/09 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
jQuery树形下拉菜单特效代码分享
2015/08/15 Javascript
整理Javascript基础语法学习笔记
2015/11/29 Javascript
JavaScript File分段上传
2016/03/10 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
2016/05/27 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
jquery dialog获取焦点的方法
2017/02/09 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
Vue表单demo v-model双向绑定问题
2018/06/29 Javascript
Makefile/cmake/node-gyp中区分判断不同平台的方法
2018/12/18 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
vue 路由子组件created和mounted不起作用的解决方法
2019/11/05 Javascript
node.js使用 http-proxy 创建代理服务器操作示例
2020/02/10 Javascript
Python中的匿名函数使用简介
2015/04/27 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
python中的闭包函数
2018/02/09 Python
Python生成器generator用法示例
2018/08/10 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
介绍一下木马病毒的种类
2015/07/26 面试题
2014年政工师工作总结
2014/12/18 职场文书
转让协议书
2015/01/27 职场文书
禁毒心得体会范文
2016/01/15 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
教你怎么用Python生成九宫格照片
2021/05/20 Python