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 相关文章推荐
Convert Seconds To Hours
Jun 16 Javascript
Javascript 类与静态类的实现
Apr 01 Javascript
javascript中的作用域scope介绍
Dec 28 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
浅析Bootstrap验证控件的使用
Jun 23 Javascript
BootStrap Table 分页后重新搜索问题的解决办法
Aug 08 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
彻底搞懂JavaScript中的apply和call方法(必看)
Sep 18 Javascript
vue中的计算属性实例详解
Sep 19 Javascript
vue+element 实现商城主题开发的示例代码
Mar 26 Javascript
详解vuejs中执行npm run dev出现页面cannot GET/问题
Apr 26 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 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
239军机修复记
2021/03/02 无线电
php对象在内存中的存在形式分析
2015/02/03 PHP
CodeIgniter框架基本增删改查操作示例
2017/03/23 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
js浮点数保留两位小数点示例代码(四舍五入)
2013/12/26 Javascript
jQuery之字体大小的设置方法
2014/02/27 Javascript
查找页面中所有类为test的结点的方法
2014/03/28 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
AngularJs IE Compatibility 兼容老版本IE
2016/09/01 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
JavaScript Window窗口对象属性和使用方法
2020/01/19 Javascript
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现定时播放mp3
2015/03/29 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
python实现mysql的读写分离及负载均衡
2018/02/04 Python
Django开发中复选框用法示例
2018/03/20 Python
python hook监听事件详解
2018/10/25 Python
对python修改xml文件的节点值方法详解
2018/12/24 Python
python自动发微信监控报警
2019/09/06 Python
python3实现elasticsearch批量更新数据
2019/12/03 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
keras导入weights方式
2020/06/12 Python
python自动化测试三部曲之unittest框架的实现
2020/10/07 Python
Pycharm github配置实现过程图解
2020/10/13 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
2016/10/20 HTML / CSS
世界上最好的帽子:Tilley
2016/11/27 全球购物
哥伦比亚加拿大官网:Columbia Sportswear Canada
2020/09/07 全球购物
普天C++笔试题
2016/03/20 面试题
2015年乡镇党务公开工作总结
2015/05/19 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
Python利用zhdate模块实现农历日期处理
2022/03/31 Python