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 相关文章推荐
张孝祥JavaScript学习阶段性总结(2)--(X)HTML学习
Feb 03 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
Mar 23 Javascript
JavaScript入门之对象与JSON详解
Oct 21 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
jQuery实现表格颜色交替显示的方法
Mar 09 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
JavaScript中rem布局在react中的应用
Dec 09 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
bootstrap table支持高度百分比的实例代码
Feb 28 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
vue-i18n实现中英文切换的方法
Jul 06 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 mssql 日期出现中文字符的解决方法
2009/03/10 PHP
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
PHP获取浏览器信息类和客户端地理位置的2个方法
2014/04/24 PHP
Yii中render和renderPartial的区别
2014/09/03 PHP
CI框架安全类Security.php源码分析
2014/11/04 PHP
一个简单的php MVC留言本实例代码(必看篇)
2016/09/22 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
jquery获得keycode的示例代码
2013/12/30 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
关于React动态加载路由处理的相关问题
2019/01/07 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
Vue中rem与postcss-pxtorem的应用详解
2019/11/20 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
[01:45]DOTA2新英雄“神谕者”全方位展示
2014/11/21 DOTA
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
python发送HTTP请求的方法小结
2015/07/08 Python
Python导出DBF文件到Excel的方法
2015/07/25 Python
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
CSS3中线性颜色渐变的一些实现方法
2015/07/14 HTML / CSS
html5 乒乓球(碰撞检测)实例二
2013/07/25 HTML / CSS
JMS中Topic和Queue有什么区别
2013/05/15 面试题
《卖木雕的少年》教学反思
2014/04/11 职场文书
2014年党支部学习材料
2014/05/19 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
党员自评材料范文
2014/12/17 职场文书
2015年初三班主任工作总结
2015/05/21 职场文书
答辩状格式范本
2015/05/22 职场文书
增值税发票丢失证明
2015/06/19 职场文书
AJAX实现省市县三级联动效果
2021/10/16 Javascript
Android Rxjava3 使用场景详解
2022/04/07 Java/Android