js 获取和设置css3 属性值的实现方法

Harpsichord1207 发布于2019-08-29 12:17 / 647人阅读

摘要：众多周知增加了很多属性，在读写的时候就没有原先那么方便了。如只考虑行间样式的话，只需就可获取，设置的时候也只需要即可。设置的时候很简单遵循驼峰式的写法即可。获取的时候的值为字符串如何获取想要的值呢搜索半天没有找到简单办法。

众多周知 CSS3 增加了很多属性，在读写的时候就没有原先那么方便了。

如:

只考虑行间样式的话，只需 div.style.left 就可获取，设置的时候也只需要 div.style.left="100px" 即可。很简单。

但是css3来了

如:

怎么搞？被吓住了。。。

设置的时候很简单：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);

各种等等。。。

idc机房托管专线服务 js获取值的长度 js获取属性 js 获取ext属性 js 获取第一个属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111791.html

js 获取和设置css3 属性值的实现方法

摘要：众多周知增加了很多属性，在读写的时候就没有原先那么方便了。如只考虑行间样式的话，只需就可获取，设置的时候也只需要即可。设置的时候很简单遵循驼峰式的写法即可。获取的时候的值为字符串如何获取想要的值呢搜索半天没有找到简单办法。众多周知 CSS3 增加了很多属性，在读写的时候就没有原先那么方便了。如: 只考虑行间样式的话，只需 div.style.left 就可获取，设置的时候也只需要 ...

Yang_River 2019-08-05 10:57 评论0 收藏0
js 获取和设置css3 属性值的实现方法

摘要：众多周知增加了很多属性，在读写的时候就没有原先那么方便了。如只考虑行间样式的话，只需就可获取，设置的时候也只需要即可。设置的时候很简单遵循驼峰式的写法即可。获取的时候的值为字符串如何获取想要的值呢搜索半天没有找到简单办法。众多周知 CSS3 增加了很多属性，在读写的时候就没有原先那么方便了。如: 只考虑行间样式的话，只需 div.style.left 就可获取，设置的时候也只需要 ...

lovXin 2019-08-20 15:18 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

Hydrogen 2019-08-05 12:48 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
使用Move.js创建CSS3动画

摘要：是使用简单函数创建动画的一个简单的库。基础知识提供了创建动画的最简单的。他用于分割动画为两个集合，并按顺序执行。如下动画被分为两步，通过方法实现分割使用创建复杂动画在本教程中，我们已经写了很多基本的动画来了解各个方法。原文链接，请移步creating-css-animations-using-move-js 第一次翻译，如有误解，请移步原文在网站上，CSS3 的过渡和动画是当前...

MASAILA 2019-08-21 12:13 评论0 收藏0