2

我有一些 Javascript 可以检测浏览器并根据浏览器对元素应用转换。Webkit 的那个在 Chrome 上运行良好，但 Firefox 的那个不行。有人可以告诉我下面的代码是否正确：

if(typeof navigator.vendor.toLowerCase().indexOf('chrome')!=-1){    
    document.getElementById('jj_preview7').style.WebkitTransform = 'scale(' + jj_input23 + ') ' + 'rotate(' + jj_input24 + 'deg)' + 'translate(' + jj_input25 + 'px, ' + jj_input26 + 'px)' + 'skew(' + jj_input27 + 'deg, ' + jj_input28 + 'deg)';
}

if(typeof navigator.vendor.toLowerCase().indexOf('firefox')!=-1){
    document.getElementById('jj_preview7').style.MozTransform = 'scale(' + jj_input23 + ') ' + 'rotate(' + jj_input24 + 'deg)' + 'translate(' + jj_input25 + 'px, ' + jj_input26 + 'px)' + 'skew(' + jj_input27 + 'deg, ' + jj_input28 + 'deg)';
}

提前致谢

4

2 回答 2

2 
// Test element we apply both kinds of transforms to:
var testEl = document.createElement('div');
testEl.style.MozTransform = 'translate(100px) rotate(20deg)';
testEl.style.webkitTransform = 'translate(100px) rotate(20deg)';
var styleAttrLowercase = testEl.getAttribute('style').toLowerCase();

// when we check for existence of it in the style attribute;
// only valid ones will be there.
var hasMozTransform = styleAttrLowercase.indexOf('moz') !== -1;
var hasWebkitTransform = styleAttrLowercase.indexOf('webkit') !== -1;

这样做你现在可以这样做：

var transformParts = [];

if (jj_input23 !== '') {
    transformParts.push('scale(' + jj_input23 + ')');
}

if (jj_input23 !== '') {
    transformParts.push('rotate(' + jj_input24 + 'deg)');
}
if (jj_input25 !== '' && jj_input26 !== '') {
    transformParts.push('translate(' + jj_input25 + 'px, ' + jj_input26 + 'px)');
}

if (jj_input27 !== '' && jj_input28 !== '') {
    transformParts.push('skewX(' + jj_input27 + 'deg) skewY(' + jj_input28 + 'deg)');
}
var transformTxt = transformParts.join(' ');

if (hasWebkitTransform) {    
    document.getElementById('jj_preview7').style.WebkitTransform = transformTxt;
}

if (hasMozTransform) {
    document.getElementById('jj_preview7').style.MozTransform = transformTxt;
}
于 2012-06-09T16:46:46.147 回答
0

这是解决方案：http: //jsfiddle.net/Adu49/1/

当您直接从输入中读取而不解析它时，您可能会生成 CSS 声明，例如：scale() translate(deg,deg)这显然是非法的。在这种情况下，Firefox 更愿意放弃它，而 Chrome 更愿意接受部分正确的声明。这就是为什么您的代码不能在 Firefox 上运行但在 Chrome 上运行的原因，并且在您填写所有字段后，它最终将在两种浏览器上运行。

So I placed some value || default in your code, which will guaranty a proper default value is set when the input box is empty (if you want to interact with user, you need more validation code here.)

And some off-topic here. Please change the way you naming variables and elements, it's too confusing.

于 2012-06-09T17:01:48.267 回答