JS - 为所有CSS转换添加浏览器特定的前缀

Question

我有一组使用CSS转换来显示各种内容的页面。很多内容都是动态生成的，包含CSS transform ed元素。 我需要它在仅支持-webkit-transform但不支持标准transform的浏览器上工作。

我是否可以检查transform的所有元素并向其添加-webkit-transform。

编辑：我想在一个地方执行此操作，可能是在页面完成渲染后运行的一段脚本中。

Answer 1

您不需要检查每个元素。在页面加载时使用特征检测。像这样：

if (document.body.style.transform != undefined)
{
     // transform
}
else
{
    // -webkit-transform
}

Answer 2

这段代码是我需要在一个项目上实现的扩展版本，它会检查浏览器是否需要任何前缀，并根据需要在给定属性上设置它们： DEMO

var vendors = [
    '-webkit-',
    '-o-',
    '-moz-',
    '-ms-',
    ''
];

function toCamelCase(str) {
    return str.replace(/(\-[a-z])/g, function($1) {
        return $1.toUpperCase().replace('-', '');
    });
}

function getSupportedProp(proparray) {
    var root = document.documentElement,
        rootStyle = root.style;
    for (var i = 0, proparrayLength = proparray.length; i < proparrayLength; i++) {
        if (proparray[i] in rootStyle) {
            return proparray[i];
        }
    }
}

function setProp(prop){
    var propArray = [];
  for(var i=0, vendorsLength=vendors.length; i < vendorsLength; i++){
    var vendor=vendors[i];
    propArray.push(toCamelCase(vendor + prop));
  };
  var prefixedProp = getSupportedProp(propArray);

  document.body.querySelectorAll('*').forEach(function(elem,index){
    var value=window.getComputedStyle(elem).getPropertyValue(prop);
    elem.style[prefixedProp] = value;
  });
}

setProp('transform');