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

网络编程 2025/1/23 佚名

2 0 1

蝙蝠岛资源网 Design By www.hbtsch.com

   众多周知 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);

   各种等等。。。

js,获取属性值

标签：

js,获取属性值

蝙蝠岛资源网 Design By www.hbtsch.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

蝙蝠岛资源网 Design By www.hbtsch.com

评论“js 获取和设置css3 属性值的实现方法”

暂无js 获取和设置css3 属性值的实现方法的评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2025年01月23日

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

js,获取属性值

javascript中的startWith和endWith的几种实现方法

IE8对JS通过属性和数组遍历解析不一样的地方探讨

评论“js 获取和设置css3 属性值的实现方法”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接