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);

各种等等。。。

赞 (0)

相关推荐

  • 原生javascript+css3编写的3D魔方动画旋扭特效

    原生javascript+css3编写的3D魔方动画旋扭特效

    一直从事于后端编程工作,工作中也经常接触和使用一些前端技术,但大多数还是用于操作和控制数据与客户端交互工作.随着互联网技术的发展以及硬件性能的不断提升,人们对于交互式体验已变得越来越重视,进而前端技术已经越来越突显出它的重要性,特别是一些炫酷的特效,精美的UI设计,都使人眼前一亮,顿时觉得网站平台都高大上不少,很博人们眼球,给人们以很好的视觉冲击,特别是现在的css3,HTML5技术的更新,使得以更小的代价就可以轻松实现这些效果,故此,顿时膜拜起前端技术,悠然起了兴趣,跃跃欲试,随机利用css3

  • javascript与css3动画结合使用小结

    当Html5,css3已渐渐成为主流的时候,我还非常习惯的用js去做一些简单的动画.因为在桌面浏览器上, 并非所有的都支持css3.用户也倒是很奇怪,用户习惯并不是每个用户都可以被培养.总有不少人会觉得win7.win8没xp好用.但手机方面就大不一样了,手机浏览器对html5和css3的支持还是很不错的.但手机硬件处理能力却又十分有限.在四核.八核手机横行的今天,依然有像我这样使用双核或单核手机的.js虽好,单奈何接触不多,调不好那种感觉.一个简单的页面滑动,在i7的pc上运行十分流畅,可是,

  • wap手机图片滑动切换特效无css3元素js脚本编写

    手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上完蛋了,所 有下定决心自己做一个,谁知出现了很多的问题,其中最重要的是给图片加链接,网页中的上下滚动条不能在拖动图片的时候滚动,并且不能兼容pc机器上的拖动:在这里就简单介绍一下遇到的问题和解决的方法: 问题一:给图片加上链接后,在拖动的时候总是跳到其他页面: 问题根源主要是不能判断是点击还是拖动,

  • javascript判断css3动画结束 css3动画结束的回调函数

    javascript判断css3动画结束 css3动画结束的回调函数

    css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,JavaScript仍然能捕获动画或变换的结束事件: transitionend事件和animationend事件标准的浏览器事件,但在WebKit浏览器里你仍然需要使用webkit前缀,所以,我们不得不根据各种浏览器分别检测事件 复制代码 代码如下: var transitions = {        'transition':'transitionend',

  • JavaScript判断浏览器对CSS3属性是否支持的多种方法

    前言 CSS3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的animation-play-state,就只有部分浏览器支持. 下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性: 第一种:javascript比较常用下面这个代码: var support_css3 = (function() { var div = document.createElement

  • JavaScript快速检测浏览器对CSS3特性的支持情况

    JavaScript快速检测浏览器对CSS3特性的支持情况

    在项目中需要快速检测浏览器是否支持某CSS3特性,比如检测是否支持"transform",然后我的布局会有两种完全不同的版式. 当然除开本文介绍的这种快速方法,还有一种更有名和更通用的方法,那就是modernizr,运行脚本之后它会在html的class上加上浏览器支持的所有特性的列表. 优点: js是可配置的,不需要的特性检测可以在配置脚本中去掉基于特性检测js库简单好用 除此之外还有一种不太好的方法,那就是判断浏览器的UA,不好的原因是UA可能会伪造,而且版本判断繁琐,还有不稳定.

  • JS判断浏览器是否支持某一个CSS3属性的方法

    1.引子 css3的出现让浏览器的表现更加的丰富多彩,表现冲击最大的就是动画了,在日常书写动画的时候,很有必要去事先判断浏览器是否支持,尤其是在写CSS3动画库的时候.比如transition的animation-play-state,就只有部分浏览器支持. 2.检测方法 下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性: /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false * @

  • CSS3+Js实现响应式导航条

    CSS3+Js实现响应式导航条

    今天制作了一个响应式导航条,能够自动随着不同的屏幕分辨率或浏览器窗口大小的不同而改变导航条的样式,这里主要用到的就是CSS3的Media Query.具体可以查看浅谈响应式布局这篇文章,这里就不花费大量的篇幅介绍了,主要看一下这个导航条该怎么做. 另外需要提到的是,ie6-ie8是不支持CSS3的Media Query的,因此对于ie6-ie8我们需要特殊处理,就让他们保持默认样式,这对于布局及样式上都要考虑到这一点. 首先看一下布局这一块,html代码如下: 复制代码 代码如下: <div c

  • wap图片滚动特效无css3元素纯js脚本编写

    手机图片滑动切换,网上有很多这样的例子,但都借助于其他组件,让代码混乱的不行:还有就是用到css3里的 transform:translate(x,y);移动元素,不过发现在不支持css3的设备上马上完蛋了,所以下定决心自己做一个,谁知出现了很多的问题,其中最重要的是给图片加链接,网页中的上下滚动条不能在拖动图片的时候滚动,并且不能兼容pc机器上的拖动:在这里就简单介绍一下遇到的问题和解决的方法: 问题一:给图片加上链接后,在拖动的时候总是跳到其他页面 问题根源主要是不能判断是点击还是拖动,手机

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

    众多周知 CSS3 增加了很多属性,在读写的时候就没有原先那么方便了. 如: <div style="left:100px"></div> 只考虑行间样式的话,只需 div.style.left 就可获取,设置的时候也只需要 div.style.left='100px' 即可.很简单. 但是css3来了 如: <div style="-webkit-transform: translate(20px,-20px)"></di

  • C#通过属性名字符串获取、设置对象属性值操作示例

    本文实例讲述了C#通过属性名字符串获取.设置对象属性值操作.分享给大家供大家参考,具体如下: #通过反射获取对象属性值并设置属性值 0.定义一个类 public class User { public int Id { get; set; } public string Name { get; set; } public string Age { get; set; } } 1.通过属性名(字符串)获取对象属性值 User u = new User(); u.Name = "lily"

  • js简单遍历获取对象中的属性值的方法示例

    js简单遍历获取对象中的属性值的方法示例

    本文实例讲述了js简单遍历获取对象中的属性值的方法.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • JS获取复选框的值,并传递到后台的实现方法

    给复选框命名:<input type='checkbox' name='checkTheme' value='"> 我在提交的时候onclick="aa();" function aa() { var bb = ""; var temp = ""; var a = document.getElementsByName("checkTheme"); for ( var i = 0; i < a.len

  • springboot如何获取yml里面的属性值

    springboot如何获取yml里面的属性值

    目录 如何获取yml里面的属性值 开发环境 项目结构 pom依赖 springboot启动类 person.yml person.java Dog.java SpringbootDemoApplicationTests 控制台输出 获取.yml中自定义参数 通过@Value获取 通过@ConfigurationProperties(prefix = "weixinAndAli")注解 如何获取yml里面的属性值 开发环境 idea jdk1.8 项目结构 pom依赖 <?xml

  • 浅谈vue的iview列表table render函数设置DOM属性值的方法

    如下所示: { title: '负责人社保照片', key: 'leaderIdNumber', render: (h, params) => { return h('img',{domProps:{ src:params.row.leaderIdNumber }}) } }, 找了好多,终于找到了原因,如果想要让列表返回的是一个img标签,并且设置img的src,这里不能用props,而是要用domProps就ok了. 以上这篇浅谈vue的iview列表table render函数设置DOM属

  • JS返回iframe中frameBorder属性值的方法

    本文实例讲述了JS返回iframe中frameBorder属性值的方法.分享给大家供大家参考.具体分析如下: frameborder 属性规定是否显示框架周围的边框. <!DOCTYPE html> <html> <body> <iframe id="myframe" src="/default.asp" frameborder="0"> <p>Your browser does not

  • Java通过反射机制动态设置对象属性值的方法

    /** * MethodName: getReflection<br> * Description:解析respXML 在通过反射设置对象属性值 * User: liqijing * Date:2015-7-19下午12:42:55 * @param clzzName * @param respXML * @return * @throws ClassNotFoundException * @throws DocumentException * @throws IllegalArgumentE

  • js 获取html5的data属性实现方法

    我以前一直以为只能用jquery的data()来获取 哈哈 是我太弱了 <!DOCTYPE html> <html> <head> <title>dataset</title> <meta charset="utf-8"> </head> <body> <div id='div' data-index='demo'> </div> </body> <

  • JS获取网页图片name属性的方法

    本文实例讲述了JS获取网页图片name属性的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以用来获取网页图片的name属性 <!DOCTYPE html> <html> <body> <img id="compman" name="compman" src="compman.gif" alt="Computerman" width="107" height

随机推荐