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

时间:2013-09-25 02:54:15

标签: javascript css replace vendor-prefix

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

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

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

2 个答案:

答案 0 :(得分: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%' );

答案 1 :(得分:0)

您必须使用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。以前的代码只是一个例子。