作者：raymondxiao518 | 来源：互联网 | 2023-10-11 05:24
这篇文章将为大家详细讲解有关如何使用Javascript动态设置CSS3属性值，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
使用Javascript动态设置CSS3属性值使我们能够更精细地控制CSS过渡。在 使用Javascript设置CSS3属性的教程中 ，以下是通用的CSS3属性setter和getter。它实时检查浏览器支持的Javascript形式的CSS属性版本（即：“ transform”或“ WebkitTransform”），并返回该属性。
| "vertical-align: inherit;">"vertical-align: inherit;">function
getcss3prop（cssprop）{"vertical-align: inherit;">"vertical-align: inherit;">
var
css3vendors = [&＃39;&＃39;，&＃39; - moz - &＃39;，&＃39; - webkit - &＃39;，&＃39; - o - &＃39;，&＃39; - ms - &＃39;，&＃39; - khtml-&＃39;]"vertical-align: inherit;">"vertical-align: inherit;">
var
root = document.documentElement"vertical-align: inherit;">"vertical-align: inherit;">
function
camelCase（str）{"vertical-align: inherit;">"vertical-align: inherit;">
return
str.replace（/ \ - （[az]）/ gi，function（match，p1）{return
p1.toUpperCase（）}）"vertical-align: inherit;">"vertical-align: inherit;">
}"vertical-align: inherit;">"vertical-align: inherit;">
for（var
i = 0; i "vertical-align: inherit;">"vertical-align: inherit;">
var
css3propcamel = camelCase（css3vendors [i] + cssprop）"vertical-align: inherit;">"vertical-align: inherit;">
if（css3propcamel.substr（0,2）==&＃39;Ms&＃39;）css3propcamel =&＃39;m&＃39;+ css3propcamel.substr（1）if（root.style中的css3propcamel）"vertical-align: inherit;">"vertical-align: inherit;">
返回css3propcamel"vertical-align: inherit;">"vertical-align: inherit;">
}"vertical-align: inherit;">"vertical-align: inherit;">
返回undefined"vertical-align: inherit;">"vertical-align: inherit;">
}
|
只需输入一个未经改动的CSS3属性即可获得浏览器支持的版本。如果浏览器不支持任何形式的属性，undefined则返回。
| "vertical-align: inherit;">"vertical-align: inherit;">var
transformprop = getcss3prop（&＃39;transform&＃39;）
transitiOnprop= getcss3prop（&＃39;transition&＃39;）
|
获得CSS3属性的受支持版本后，您可以动态探测或设置其值，例如：
| "vertical-align: inherit;">"vertical-align: inherit;">if（transformprop）{var
el = document.getElementById（&＃39;box&＃39;）"vertical-align: inherit;">"vertical-align: inherit;">
el.style [transformprop] =&＃39;rotate（180deg）scale（1.05,1.05）&＃39;"vertical-align: inherit;">"vertical-align: inherit;">
}
|
关于“如何使用Javascript动态设置CSS3属性值”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
京公网安备 11010802041100号