众多周知 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 属性值的实现方法

js 获取和设置css3 属性值的实现方法的更多相关文章

  1. 如何用javascript获取和设置css3属性

    ==================获取======================== 我想到的第一个思路 var test = document.getElementById('test'); c ...

  2. C#通过属性名字符串获取、设置对象属性值

    之前理工项目从这个博客找到了相对应的方法:C#通过属性名字符串获取.设置对象属性值 https://www.cnblogs.com/willingtolove/p/12198871.html

  3. java 通过反射获取和设置对象属性值

    public static Object parseDate(Object object){ SimpleDateFormat sdf = new SimpleDateFormat("yyy ...

  4. js获取json对象的属性值

    //   var responseData = response.data.result;             for (var r in responseData) {              ...

  5. js获取浏览器高度和宽度值,尽量的考虑了多浏览器。

    js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...

  6. 【转】js 获取浏览器高度和宽度值(多浏览器

    原文地址:http://www.jb51.net/article/19844.htm js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ...

  7. python通过win32api轻松获取控件的属性值

    1.如何利用句柄操作windows窗体 首先,获得窗体的句柄  win32api.FindWindows() 第二,获得窗体中控件的id号,spy++ 第三,根据控件的ID获得控件的句柄(hwnd)  ...

  8. jquery获取当前选项的属性值a

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  9. 7 -- Spring的基本用法 -- 10... 获取其他Bean的属性值;获取Field值;获取任意方法的返回值

    7.10 高级依赖关系配置 组件与组件之间的耦合,采用依赖注入管理:但基本类型的成员变量值,应直接在代码中设置. Spring支持将任意方法的返回值.类或对象的Field值.其他Bean的getter ...

随机推荐

  1. Qt:手动编辑UI文件——This file can only be edited in Design mode

    UI文件是只读文件,正常情况下我们只能在"Design"模式下,通过调整各种控件的方式间接修改它. 但是有时我们遇到许多重复性的工作,比如向某个Combobox中添加一系列的Ite ...

  2. Python:time与datetime

    学习自: (10条消息) Python的time和datetime的简单使用_慢行的蜗牛-CSDN博客 Python之 time 与 datetime模块 - 叶灵溪&叶仙樱 - 博客园 py ...

  3. PIL-ImageFont:OSError: cannot open resource

    使用PIL时,创建某个字体Font对象时出错: font=ImageFont.truetype('Arial.ttf',36) 可能原因有两个: 1.PIL无法定位到字体文件的位置. 可以通过提供绝对 ...

  4. WebSocket长连接

    WebSocket长连接 1.概述 1.1 定义 1.2 原理 2.Django中配置WebSocket 2.1安装第三方法包 pip install channels 2.2 Django 中的配置 ...

  5. JZ-025-复杂链表的复制

    复杂链表的复制 题目描述 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针random指向一个随机节点),请对此链表进行深拷贝, 并返回拷贝后的头结点.(注意,输 ...

  6. LeetCode-055-跳跃游戏

    跳跃游戏 题目描述:给定一个非负整数数组 nums ,你最初位于数组的 第一个下标 . 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个下标. 示例说明请见LeetCod ...

  7. laravel7 图片上传及视图显示

    1:修改框架config下的文件filesystems.php中的配置: 原文件 <?php return [ /* |------------------------------------- ...

  8. PHP 开发者如何做好密码保护 & Laravel 底层密码存储和验证实现

    随着在线攻击的增多,密码安全越来越重要.作为开发者我们要担负起安全管理.计算哈希和存储用户密码的责任,不管应用是简单的游戏还是绝密商业文件的仓库,都要做到这一点.PHP内置了一些工具,让保护密码变得更 ...

  9. 浅浅的聊一下 WebSocket

    第一次看到 ws:// 和 wss:// 时候,感觉好高级啊,还有这种协议. Websocket 历史 WebSocket是在2008年6月诞生的1.经由IEFT标准化后,2009年chrome 4第 ...

  10. ASP.NET Core 6框架揭秘实例演示[23]:ASP.NET Core应用承载方式的变迁

    ASP.NET Core应用本质上就是一个由中间件构成的管道,承载系统将应用承载于一个托管进程中运行起来,其核心任务就是将这个管道构建起来.从设计模式的角度来讲,"管道"是构建者( ...