Question

我正在制作一个想要做这样的事情的javascript脚本：

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

只是为了澄清这一点，是的，我已经在脚本中提前设置了这两种样式。但是，这会导致错误，例如，在Chrome中，它无法识别转换样式。因此，替换失败，因为elementObject.style.transform未定义，未定义没有方法替换。有没有办法在不造成这些错误的情况下做到这一点？我只想要webkit转换，我不需要moz，o或任何其他前缀。

Answer 1

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%' );

Answer 2

您必须使用Adapter设计模式。

例如：

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方法。您可以使用供应商前缀列表来使代码更加DRY。以前的代码只是一个例子。

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

2 个答案: