我正在制作一个想要做这样的事情的javascript脚本:
elementObject.style.transform.replace('...','...');
elementObject.style.webkitTransform.replace('...','...');
只是为了澄清这一点,是的,我已经在脚本中提前设置了这两种样式。但是,这会导致错误,例如,在Chrome中,它无法识别转换样式。因此,替换失败,因为elementObject.style.transform
未定义,未定义没有方法替换。有没有办法在不造成这些错误的情况下做到这一点?我只想要webkit
转换,我不需要moz
,o
或任何其他前缀。
答案 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。以前的代码只是一个例子。