js 获取和设置css3 属性值的实现方法


Posted in Javascript onMay 06, 2013

   众多周知 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);

   各种等等。。。

Javascript 相关文章推荐
jQuery点击tr实现checkbox选中的方法
Mar 19 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
Jun 24 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
将中国标准时间转换成标准格式的代码
Mar 20 Javascript
一个JS函数搞定网页标题(title)闪动效果
May 13 Javascript
浅谈Javascript中深复制
Dec 01 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
May 07 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 #Javascript
javascript中encodeURI和decodeURI方法使用介绍
May 06 #Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 #Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 #Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 #Javascript
jQuery动画animate方法使用介绍
May 06 #Javascript
JS修改css样式style浅谈
May 06 #Javascript
You might like
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
laravel 根据不同组织加载不同视图的实现
2019/10/14 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
js猜数字小游戏的简单实现代码
2013/07/02 Javascript
js有序数组的连接问题
2013/10/01 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
CKEditor无法验证的解决方案(js验证+jQuery Validate验证)
2016/05/09 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
highcharts 在angular中的使用示例代码
2017/09/20 Javascript
vue slot 在子组件中显示父组件传递的模板
2018/03/02 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
npm的lock机制解析
2019/06/20 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
vue 使用高德地图vue-amap组件过程解析
2019/09/07 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
图解JS原型和原型链实现原理
2020/09/15 Javascript
[03:17]2014DOTA2 国际邀请赛中国区预选赛 四强专访
2014/05/23 DOTA
[00:35]可解锁地面特效
2018/12/20 DOTA
python list语法学习(带例子)
2013/11/01 Python
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python中的多行注释文档编写风格汇总
2016/06/16 Python
Python调用REST API接口的几种方式汇总
2020/10/19 Python
美国LOGO设计公司:The Logo Company
2018/07/16 全球购物
学校司机岗位职责
2013/11/14 职场文书
自荐信范文
2013/12/10 职场文书
银行简历自我评价
2014/02/11 职场文书
禁烟标语大全
2014/06/11 职场文书
现役军人家属慰问信
2015/03/24 职场文书
考研导师推荐信范文
2015/03/27 职场文书
JS ES6异步解决方案
2021/04/29 Javascript
redis lua限流算法实现示例
2022/07/15 Redis