供应商在javascript中的前缀css3属性

Question

我正在尝试添加动画持续时间的css3属性，相应的高度和宽度的网格。我是用这个代码div.style.animationDuration.做的这对我有好处。

我关心的是如何在js (如-ms-动画持续时间)中为动画持续时间添加供应商前缀css3属性。

Answer 1

通常，css javascript中的供应商前缀如下：

1. moz for Mozilla Firefox
2. webkit for Google Chrome、Apple Safari和其他基于webkit的浏览器
3. Microsoft Internet Explorer的ms
4. 歌剧“O” 因此，可以将div.style.animationDuration替换为div.style.webkitAnimationDuration

要处理这个问题，通常您可以编写一个方法

function setVendorCss(element, property, value) {
  element.style["webkit" + property] = value;
  element.style["moz" + property] = value;
  element.style["ms" + property] = value;
  element.style["o" + property] = value;
}

在这里阅读更多javascript.htm

Answer 2

而不是像这样选择元素：

element.style.color = 'red';
element.style.fontSize = '2em';

尝试：

element.style.cssText = 'color: red; font-size: 2em';

style.cssText对于一次添加多个样式非常有用，即使是那些需要前缀的更复杂的样式。