js 获取和设置css3 属性值的实现方法
发布时间：2024-09-30 11:17:27
众多周知 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);
各种等等。。。
0
投稿猜你喜欢
有些时候我们发现一些模块没有提供pip install 命令和安装教程 , 只提供了一个setup.py文件 , 这个时候如何安装呢?步骤打- 一直以来，Web 字体背着单调的恶名，因为想在网页上显示一种字体，该字体文件本身必须存在于用户的电脑中，由于这个限制，加上 Web 用户可能
- AnacondaNavigator Jupyter Notebook更换Python内核 前言为什么要换呢，因为新安装的Anaco
- Elasticsearch查询查询分类：基本查询：使用es内置查询条件进行查询组合查询：把多个查询组合在一起进行复合查询过滤：查询的同时，通
- 前言大家可能乍一看，通过TCP/IP层连接两个进程会感觉可怕， 但是在Go语言中可能比你想象的要简单的多。下面话不多说了，来一起看看详细的介
- 插入或更新null空值一、在SQL语句中直接插入null或空字符串“”int? item = nul
- 来蓝色一直都在潜水,很少写帖子,太对不起大家了.下面和大家探讨一个话题,希望能引起大家的兴趣.关于H1,一直都想和大家讨论H1用法的问题,可
- ASP * 页制作中连接Oracle数据库的例子，下面这段代码能够显示，当前用户所能够看到的所有的用户和表，有兴趣的， 可以把每个表的内容上
- 下载的数据是pascal voc2012的数据，已经有annotation了，不过是xml格式的，训练的模型是在Google模型的基础上加了
- 首先说说什么是内存泄露，在一个进程中，如果某一块内存无法访问，且直到进程结束为止也无法释放，那么就发生了内存泄露。通常这种情况发生在C++之
- 在本教程中，您将学习如何使用 OpenCV 和 Python 构建人员计数器。使用 OpenCV，我们将实时计算进或出百货商店的人数。在今天
- 这里假设你是通过models的ImageField上传图片，并期望在前台img标签中能显示。能否访问图片关键在于，是否能通过正确的路径访问。
- 一、Excel环境配置 服务器端的环境配置从参考资料上看，微软系列的配置应该都行，即：1．Win9x+PWS+Office2．Wi
- 前言SVG可以算是目前最最火热的图像文件格式了，它的英文全称为Scalable Vector Graphics，意思为可缩放的矢量图形。它是
- 本文和大家重点讨论一下Perl哈希表的概念，Perl语言和其他编程语言各有各的特点，这里和大家分享一下Perl哈希表的概念，其实Perl哈希
- 废话不多说了，直接给大家贴代码了，具体代码如下所示：<script type="text/javascript"&
- 本文实例为大家分享了python3.6使用SMTP协议发送邮件的具体代码，供大家参考，具体内容如下代码如下：# !/usr/bin/pyth
- 目录1，刚开始（可能会很low）2.单行消失3.优化后的单行消失总结1，刚开始（可能会很low）import timescale=10pri
- 译序：本文译自Smashingmagazine，但是原文讲述的内容有些浅，也不是很完整，前端观察在翻译的前提下，增加了更多的更系统的内容。如
- 本文实例讲述了PHP中PDO事务处理操作。分享给大家供大家参考，具体如下：概要：将多条sql操作（增删改）作为一个操作单元，要么都成功，要么
