js 获取和设置css3 属性值的实现方法
众多周知 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 属性值的实现方法的更多相关文章
- 如何用javascript获取和设置css3属性
==================获取======================== 我想到的第一个思路 var test = document.getElementById('test'); c ...
- C#通过属性名字符串获取、设置对象属性值
之前理工项目从这个博客找到了相对应的方法:C#通过属性名字符串获取.设置对象属性值 https://www.cnblogs.com/willingtolove/p/12198871.html
- java 通过反射获取和设置对象属性值
public static Object parseDate(Object object){ SimpleDateFormat sdf = new SimpleDateFormat("yyy ...
- js获取json对象的属性值
// var responseData = response.data.result; for (var r in responseData) { ...
- js获取浏览器高度和宽度值,尽量的考虑了多浏览器。
js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...
- 【转】js 获取浏览器高度和宽度值(多浏览器
原文地址:http://www.jb51.net/article/19844.htm js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ...
- python通过win32api轻松获取控件的属性值
1.如何利用句柄操作windows窗体 首先,获得窗体的句柄 win32api.FindWindows() 第二,获得窗体中控件的id号,spy++ 第三,根据控件的ID获得控件的句柄(hwnd) ...
- jquery获取当前选项的属性值a
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- 7 -- Spring的基本用法 -- 10... 获取其他Bean的属性值;获取Field值;获取任意方法的返回值
7.10 高级依赖关系配置 组件与组件之间的耦合,采用依赖注入管理:但基本类型的成员变量值,应直接在代码中设置. Spring支持将任意方法的返回值.类或对象的Field值.其他Bean的getter ...
随机推荐
- Qt:QWidget
0.说明 QWidget类是所有用户界面对象的基类. QWidget是用户界面的原子类.它接收鼠标.键盘和来自系统的其他事件,并在屏幕上将它们绘制出来.每个Widget都是矩形的,并按照Z-order ...
- elasticsearch通用工具类
这几天写了一个关于es的工具类,主要封装了业务中常用es的常用方法. 本文中使用到的elasticsearch版本6.7,但实际上也支持es7.x以上版本,因为主要是对springboot提供的:El ...
- 调用Visual Studio的cl.exe编译C/C++程序
@ 目录 调用Visual Studio的cl.exe编译C/C++程序 前言 1.查看VS的路径 2.添加环境变量 3.查看设置是否生效 4.配置Notepad++ 调用Visual Studio的 ...
- cobbler check执行报错
httpd does not appear to be running and proxying cobbler, or SELinux is in the way. 当执行cobbler check ...
- SQL从零到迅速精通【触发器】
essay from:http://www.cnblogs.com/hoojo/archive/2011/07/20/2111316.html 触发器就类似一个小账本,记录了你在数据库做了哪些操作,可 ...
- gitee的使用
git clone git add . # 跟踪所有改动过的文件 git commit -m "commit message" # 提交所有更新过的文件 git checkout ...
- tp 七牛云文件上传
1.先创建好七牛云账号和存储空间 申请七牛云账号: 创建七牛云存储空间: 在账号的秘钥管理里面创建秘钥 获取AccessKey / SecretKey: 2.集成PHP-SDK 七牛云开发文档:htt ...
- C++移动语义 详细讲解【Cherno C++教程】
移动语义 本文是对<最好的C++教程>的整理,主要是移动语义部分,包含视频85p左值和右值.89p移动语义与90p stdmove和移动赋值操作符. 移动语义是C++11的新feature ...
- Linux环境下安装Maven
最近在搞虚拟机,记录下虚拟机内Maven环境的搭建流程 一.选择合适的版本(由于Maven运行需要依赖于JDK,所以安装之前需要保证当前虚拟机下已经安装并配置好JDK环境,安装流程参见) https: ...
- 自定义函数实现atoi功能
思路: 列如char a[ ] ="123" "1" "2" "3' "\0" 首先遍历这个字符串 知道这个字 ...