浅谈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实现的动态添加表单元素input,button等(appendChild)
Nov 24 Javascript
用JS实现一个页面多个css样式实现
May 29 Javascript
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
javascript学习笔记(一)基础知识
Sep 30 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
jquery插件hiAlert实现网页对话框美化
May 03 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
Vue中v-for的数据分组实例
Mar 07 Javascript
vue awesome swiper异步加载数据出现的bug问题
Jul 03 Javascript
angularjs实现table表格td单元格单击变输入框/可编辑状态示例
Feb 21 Javascript
vue项目中openlayers绘制行政区划
Dec 24 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
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/07/25 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
用 Composer构建自己的 PHP 框架之基础准备
2014/10/30 PHP
Yii2框架可逆加密简单实现方法
2017/08/25 PHP
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
js 操作符实例代码
2009/10/24 Javascript
JQuery DataTable删除行后的页面更新利用Ajax解决
2013/05/17 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
Javascript缓存API
2016/06/14 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
JS中with的替代方法与String中的正则方法详解
2016/12/23 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
python opencv实现证件照换底功能
2019/08/19 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
如何基于Python和Flask编写Prometheus监控
2020/11/25 Python
新西兰网上购物,折扣店:BestDeals.co.nz
2019/03/20 全球购物
高等教育学自荐书范文
2014/02/10 职场文书
进步之星获奖感言
2014/02/22 职场文书
以幸福为主题的活动方案
2014/08/22 职场文书
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
学校元旦晚会开场白
2014/12/14 职场文书
2016大学迎新晚会开场白
2015/11/24 职场文书