使用JavaScript动态设置CSS3属性值使我们能够更精细地控制CSS过渡。在使用JavaScript设置CSS3属性的教程中，以下是通用的CSS3属性setter和getter。它实时检查浏览器支持的JavaScript形式的CSS属性版本（即：“ transform ”或“ WebkitTransform ”），并返回该属性。

<font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

function

getcss3prop（cssprop）{</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

var

css3vendors = [

''

，

' -  moz  - '

，

' -  webkit  - '

，

' -  o  - '

，

' -  ms  - '

，

' -  khtml-'

]</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

var

root = document.documentElement</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

function

camelCase（str）{</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

return

str.replace（/ \  - （[az]）/ gi，

function

（match，p1）{

// p1引用括号中的子匹配</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

return

p1.toUpperCase（）

//将“ - ”后的第一个字母转换为大写</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

}）</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

}</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

for

（

var

i = 0; i <css3vendors.length; i ++）{</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

var

css3propcamel = camelCase（css3vendors [i] + cssprop）</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

if

（css3propcamel.substr（0,2）==

'Ms'

）

//如果属性以'Ms'开头</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

css3propcamel =

'm'

+ css3propcamel.substr（1）

//将'M'转换为小写</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

if

（root.style中的css3propcamel）</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

返回css3propcamel</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

}</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

返回undefined</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

}</font></font>

只需输入一个未经改动的CSS3属性即可获得浏览器支持的版本。如果浏览器不支持任何形式的属性， undefined 则返回。

<font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

var

transformprop = getcss3prop（

'transform'

）

//返回'transform'或其中一个变体，例如'msTransform'，'MozTransform'，'WebkitTransform'等</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

var

transitionprop = getcss3prop（

'transition'

）

//返回'transition'或其中一个变体，例如'MozTransition'，'WebkitTransition'等</font></font>

获得CSS3属性的受支持版本后，您可以动态探测或设置其值，例如：

<font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

if

（transformprop）{

//如果已定义</font></font><font></font><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">

var

el = document.getElementById（

'box'

）</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

el.style [transformprop] =

'rotate（180deg）scale（1.05,1.05）'

</font></font><font></font><font style=

"vertical-align: inherit;"

><font style=

"vertical-align: inherit;"

>

}</font></font>

ITPub博客

四个基本的JavaScript函数来驯服CSS3过渡和动画（2）动态设置CSS3属性的值

最新文章