如何简化 JavaScript CSS 供应商前缀？

使用 JavaScript 添加供应商前缀

使用 JavaScript 通过 CSS 设置元素样式可能很乏味，尤其是在处理供应商前缀时。传统方法涉及手动设置每个前缀属性，如代码块中所示：

var transform = 'translate3d(0,0,0)';
elem.style.webkitTransform = transform;
elem.style.mozTransform = transform;
elem.style.msTransform = transform;
elem.style.oTransform = transform;

简化的解决方案

为了简化此过程，自定义函数可以创建：

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

此函数采用三个参数：要设置样式的元素、要设置的属性和所需的值。它会迭代支持的前缀并设置适当的样式。

用法

使用 setVendor 函数，上面的代码块可以简化为：

setVendor(elem, "Transform", transform);

这一行代码有效地应用了具有所有必要的供应商前缀的转换样式，使样式成为微风。

以上是如何简化 JavaScript CSS 供应商前缀？的详细内容。更多信息请关注PHP中文网其他相关文章！