用JS控制CSS时,如何添加浏览器兼容前缀?

大伯格
  • 371

现有一个<div id="aaa"><>
我想用JS给这个元素添加transition属性,并且加上webkit前缀,如下:
<div id="aaa" style="-webkit-transition:all 1s"><>

但是我用下列方法添加样式时,最终结果都是:
<div id="aaa" style="transition:all 1s"><>

所以我想知道在用JS控制CSS3属性时,如何添加webkit前缀(毕竟安卓或低版本浏览器对transform等属性支持不好。)

$('#aaa').css('WebkitTransition', 'all 1s');
$('#aaa').css('transition', 'all 1s');
$('#aaa').css('-webkit-transition', 'all 1s');
aaa.style['-webkit-transition'] = 'all 1s';
aaa.style['WebkitTransition'] = 'all 1s';
aaa.style.transition = 'all 1s';
回复
阅读 4.6k
2 个回答

使用题主的方法可能已经成功,但是在当前浏览器下它选择了样式“transition:all 1s” 所以在DOM中的行内样式只能看到“transition:all 1s”

用JS控制CSS
这里建议使用addclass的方法来添加样式。方便添加兼容而且不容易出错。

遥远的地方
  • 2
新手上路,请多包涵

用setAttribute();

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏