0

我正在制作一个想要执行以下操作的 javascript 脚本：

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

为了澄清这一点，是的，我已经在脚本的前面设置了这两种样式。但是，这会导致错误，因为例如在 Chrome 中，它无法识别转换样式。所以replace失败是因为elementObject.style.transform是undefined，undefined没有replace方法。有没有办法做到这一点而不会导致这些错误？我只想要webkit转换，我不需要moz,o或任何其他前缀。

4

2 回答 2

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%' );
于 2013-09-25T03:30:12.733 回答
0

您必须使用适配器设计模式。

例如：

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允许访问或修改任何样式的方法。您也可以使用供应商前缀列表来使代码更加干燥。前面的代码只是一个例子。

于 2013-09-25T03:30:33.810 回答