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:手动编辑UI文件——This file can only be edited in Design mode
UI文件是只读文件,正常情况下我们只能在"Design"模式下,通过调整各种控件的方式间接修改它. 但是有时我们遇到许多重复性的工作,比如向某个Combobox中添加一系列的Ite ...
- Python:time与datetime
学习自: (10条消息) Python的time和datetime的简单使用_慢行的蜗牛-CSDN博客 Python之 time 与 datetime模块 - 叶灵溪&叶仙樱 - 博客园 py ...
- PIL-ImageFont:OSError: cannot open resource
使用PIL时,创建某个字体Font对象时出错: font=ImageFont.truetype('Arial.ttf',36) 可能原因有两个: 1.PIL无法定位到字体文件的位置. 可以通过提供绝对 ...
- WebSocket长连接
WebSocket长连接 1.概述 1.1 定义 1.2 原理 2.Django中配置WebSocket 2.1安装第三方法包 pip install channels 2.2 Django 中的配置 ...
- JZ-025-复杂链表的复制
复杂链表的复制 题目描述 输入一个复杂链表(每个节点中有节点值,以及两个指针,一个指向下一个节点,另一个特殊指针random指向一个随机节点),请对此链表进行深拷贝, 并返回拷贝后的头结点.(注意,输 ...
- LeetCode-055-跳跃游戏
跳跃游戏 题目描述:给定一个非负整数数组 nums ,你最初位于数组的 第一个下标 . 数组中的每个元素代表你在该位置可以跳跃的最大长度. 判断你是否能够到达最后一个下标. 示例说明请见LeetCod ...
- laravel7 图片上传及视图显示
1:修改框架config下的文件filesystems.php中的配置: 原文件 <?php return [ /* |------------------------------------- ...
- PHP 开发者如何做好密码保护 & Laravel 底层密码存储和验证实现
随着在线攻击的增多,密码安全越来越重要.作为开发者我们要担负起安全管理.计算哈希和存储用户密码的责任,不管应用是简单的游戏还是绝密商业文件的仓库,都要做到这一点.PHP内置了一些工具,让保护密码变得更 ...
- 浅浅的聊一下 WebSocket
第一次看到 ws:// 和 wss:// 时候,感觉好高级啊,还有这种协议. Websocket 历史 WebSocket是在2008年6月诞生的1.经由IEFT标准化后,2009年chrome 4第 ...
- ASP.NET Core 6框架揭秘实例演示[23]:ASP.NET Core应用承载方式的变迁
ASP.NET Core应用本质上就是一个由中间件构成的管道,承载系统将应用承载于一个托管进程中运行起来,其核心任务就是将这个管道构建起来.从设计模式的角度来讲,"管道"是构建者( ...