javascript中的供应商前缀css3属性

Question

我正在尝试添加相应网格高度和宽度的动画持续时间css3属性。我使用此代码 div.style.animationDuration 制作了它。它对我有用。

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

Answer 1

jss for css中的供应商前缀通常如下：

1. moz for Mozilla Firefox
2. webkit for Google Chrome，Apple Safari和 其他基于webkit的浏览器
3. ms for Microsoft Internet Explorer

4. o for Opera

   因此，您可以将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;
}

在此处阅读更多https://www.kirupa.com/html5/vendor_prefixes_javascript.htm

Answer 2

而不是像这样选择元素：

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

尝试：

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

style.cssText对于一次添加多个样式很有用，即使是需要前缀的棘手样式也是如此。