浅谈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扩展插件Validate—6 radio、checkbox、select的验证
Sep 05 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
jQuery.each使用详解
Jul 07 Javascript
jQuery插件扩展操作入门示例
Jan 16 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
vue指令只能输入正数并且只能输入一个小数点的方法
Jun 08 Javascript
Puppet的一些技巧
Sep 17 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
详解原生JS回到顶部
Mar 25 Javascript
RxJS的入门指引和初步应用
Jun 15 Javascript
JavaScript中的几种继承方法示例
Dec 06 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实现信用卡校验位算法THE LUHN MOD-10示例
2014/05/07 PHP
php中explode的负数limit用法分析
2015/02/27 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
Javascript-Mozilla和IE中的一个函数直接量的问题
2007/01/09 Javascript
JavaScript对象模型-执行模型
2008/04/28 Javascript
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
写出更好的JavaScript之undefined篇(上)
2009/11/22 Javascript
Web 前端设计模式--Dom重构 提高显示性能
2010/10/22 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
javascript实现仿百度图片的瀑布流加载效果
2016/04/20 Javascript
JS脚本实现动态给标签控件添加事件的方法
2016/06/02 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
JavaScript Dom 绑定事件操作实例详解
2019/10/02 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
js实现时间日期校验
2020/05/26 Javascript
Python os模块介绍
2014/11/30 Python
python和flask中返回JSON数据的方法
2018/03/26 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
tensorflow 模型权重导出实例
2020/01/24 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
详解Tensorflow不同版本要求与CUDA及CUDNN版本对应关系
2020/08/04 Python
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
世界上最大的在线学习和教学市场:Udemy
2017/11/08 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
导游个人求职信范文
2014/03/23 职场文书
团队精神的演讲稿
2014/05/14 职场文书
2015年除四害工作总结
2015/07/23 职场文书
nginx前后端同域名配置的方法实现
2021/03/31 Servers