js 获取和设置css3 属性值的实现方法
2024-08-31 00:23:11
众多周知 CSS3 增加了很多属性,在读写的时候就没有原先那么方便了。
如:<div style="left:100px"></div>
只考虑行间样式的话,只需 div.style.left
就可获取,设置的时候也只需要 div.style.left='100px'
即可。很简单。
但是css3来了
如:<div style="-webkit-transform: translate(20px,-20px)"></div>
怎么搞?被吓住了。。。
设置的时候很简单:div.style.webkitTransform='translate(20px,-20px)'
遵循驼峰式的写法即可。
获取的时候:div.style. webkitTransform
的值为字符串 ‘translate(20px,-20px) '
如何获取想要的X、Y值呢?搜索半天没有找到简单办法。只能字符串截取,或者正则匹配来获得了。
写一个正则表达式 获取想要的 20和-20
reg=/\-?[0-9]+/g
匹配负号和数字reg2=/\-?[0-9]+\.?[0-9]*/g
可能包含小数点的
然后来match搜索一下div.webkitTransform.match(reg)
//结果 [20,-20]
就会返回一个包含X值和Y值的数组了。
同理:
-webkit-transform: skew(20deg,-50deg);/ skew(相对x轴倾斜,相对y轴倾斜)/
-webkit-transform: matrix(1,0.4,0,1,0,0);
各种等等。。。
本文转载于猿2048:js 获取和设置css3 属性值的实现方法
最新文章
- Solr 排除查询
- 运行时使用Dev的ImageListEditor
- less文件转换为css文件
- 使用Spark分析拉勾网招聘信息(二): 获取数据
- BZOJ4327 : JSOI2012 玄武密码
- sql 字段重复值,in,like
- SVN在团队项目中的使用技巧:[2]Tag操作
- IceGrid负载均衡部署 z
- VLAN系列
- css元素居中
- C#计算两个文件的相对目录算法
- require include php5中最新区别,百度上好多错的。
- Exception in thread ";main"; java.lang.ClassNotFoundException: com.mysql.jdbc.Driver
- JAVA中的按值传递
- 敏捷测试(7)--基于story的敏捷基础知识
- JavaScript 执行机制
- Android proguard混淆签名打包出现";android proguard failed to export application";解决方案
- 微信小程序内嵌网页的一些(最佳)实践
- 安卓和java开发环境的安装
- 2018-2019-1 20189221 《Linux内核原理与分析》第八周作业