浅谈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 相关文章推荐
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
Javascript获取当前时间函数和时间操作小结
Oct 01 Javascript
JS实现两表格里数据来回转移的方法
May 28 Javascript
JS实现复制内容到剪贴板功能兼容所有浏览器(推荐)
Jun 17 Javascript
详解JavaScript跨域总结与解决办法
Oct 31 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 Javascript
React通过redux-persist持久化数据存储的方法示例
Feb 14 Javascript
JavaScript使用prototype属性实现继承操作示例
May 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
文章推荐系统(二)
2006/10/09 PHP
php5新改动之短标记启用方法
2008/09/11 PHP
php输出echo、print、print_r、printf、sprintf、var_dump的区别比较
2013/06/21 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
Nodejs极简入门教程(三):进程
2014/10/27 NodeJs
javascript页面倒计时实例
2015/07/25 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
Node.js实现兼容IE789的文件上传进度条
2016/09/02 Javascript
微信小程序开发(二)图片上传+服务端接收详解
2017/01/11 Javascript
利用原生JS与jQuery实现数字线性变化的动画
2017/02/24 Javascript
Vue.2.0.5实现Class 与 Style 绑定的实例
2017/06/20 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
js 数组详细操作方法及解析合集
2018/06/01 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
ES6 Class中实现私有属性的一些方法总结
2019/07/08 Javascript
vue+导航锚点联动-滚动监听和点击平滑滚动跳转实例
2019/11/13 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
详解Python最长公共子串和最长公共子序列的实现
2018/07/07 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
python关闭占用端口方式
2019/12/17 Python
pytorch 实现模型不同层设置不同的学习率方式
2020/01/06 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
使用CSS3代码绘制可爱的Hello Kitty猫
2016/08/03 HTML / CSS
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
Urban Decay官方网站:美国化妆品品牌
2020/06/04 全球购物
服装电子商务创业计划书
2014/01/30 职场文书
高等教育学自荐书范文
2014/02/10 职场文书
人大调研汇报材料
2014/08/14 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
解决python绘图使用subplots出现标题重叠的问题
2021/04/30 Python