Javascript 使用替换为浏览器前缀js/css

我正在制作一个javascript脚本，希望执行以下操作：

elementObject.style.transform.replace('...','...');
elementObject.style.webkitTransform.replace('...','...');

为了澄清这一点，是的，我在脚本前面设置了这两种样式。但是，这会导致错误，因为例如在Chrome中，它无法识别变换样式。因此，replace失败，因为

elementObject.style.transform

未定义，且未定义的方法没有replace。有没有办法做到这一点而不引起这些错误？我只需要

webkit

转换，不需要

moz

、

o

或任何其他前缀

var st = elementObject.style;
if (st.transform !== undefined) st.transform = st.transform.replace('...','...');
// ...

或更一般的：

function replaceStyle(element, style, text, replacement) {
  var vendors = ['webkit', 'moz', 'o', 'ms'];
  var st = element.style;
  if (st[style] !== undefined) st[style] = st[style].replace(text, replacement);
  style = style.charAt(0).toUpperCase()+style.substring(1);
  for (var i=0, l=vendors.length; i<l; i++) {
    var vendorStyle = vendors[i]+style;
    if (st[vendorStyle] !== undefined)
      st[vendorStyle] = st[vendorStyle].replace(text, replacement);
  }
}

// sample call (setting width from "40px" to "100%")
replaceStyle( myElementObject, 'with', '40px', '100%' );

函数替换样式（元素、样式、文本、替换）{
var供应商=['webkit'、'moz'、'o'、'ms']；
var st=element.style；
如果（st[style]！==未定义）st[style]=st[style]。替换（文本，替换）；
style=style.charAt（0.toUpperCase（）+style.substring（1）；
对于（var i=0，l=vendors.length；i您必须使用设计模式

例如：

function transformStyle() {
    var tempEl = document.createElement('div'),
        elStyle = tempEl.style;

    if (typeof elStyle.transform !== 'undefined') {
        transformStyle = function (el, val) {
            val != null && (el.style.transform = val);
            return el.style.transform;
        };
    } else if (typeof elStyle.webkitTransform !== 'undefined') {
        transformStyle = function (el, val) {
            val != null && (el.style.webkitTransform = val);
            return el.style.webkitTransform;
        };
    } else {
        transformStyle = function () { return ''; }; //ignore when not supported
    }

    tempEl = null;
    elStyle = null;

    return transformStyle.apply(this, arguments);
}

var el = document.createElement('div');

transformStyle(el, 'rotate(-2deg)'); //set style
transformStyle(el); //rotate(-2deg)

显然，您可以编写更通用的方法，例如允许访问或修改任何样式的
style
方法。您也可以使用供应商前缀列表使代码更通用。前面的代码只是一个示例