Javascript Webkit和Moz转换，具体取决于浏览器

我有一点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)';
}

提前谢谢

// 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;
}

以下是解决方案：

由于直接读取输入而不进行解析，因此可能会生成CSS声明，如：

scale（）translate（deg，deg）

，这显然是非法的。在这种情况下，Firefox更愿意放弃它，而Chrome更愿意接受部分正确的声明。这就是为什么你的代码不能在Firefox上运行，只能在Chrome上运行的原因，在你填写完所有字段后，它最终将在两种浏览器上运行

因此，我在代码中放置了一些

value | | default

，这将保证在输入框为空时设置正确的默认值（如果您想与用户交互，您需要更多的验证代码）

---

还有一些离题。请更改命名变量和元素的方式，这太混乱了。

您不必测试引擎是哪一个。只需将样式分配给这两个浏览器，浏览器就会接受它支持的样式，而忽略另一个。我刚刚尝试了你的建议，在Chrome上工作，而不是Firefox。你能将代码发布到JSFIDLE.net吗？@Xiaoy，在这里，代码生成器看起来有点不合适，因为它是为我的模板设计的，不是你想在Firefox 12.0/Mac中单独使用和为我工作。实际上，我不清楚你的问题是什么。它是在检测中还是在变换的应用中？有两个问题，“不在Firefox上工作”的信息不足以让人们有所帮助。实际的转换不起作用。这是我网站的链接。如果您在其他选项卡上测试模块，它们可以工作，但转换选项卡不能。啊，您的问题没有说明这一点。对我来说，这个问题读起来像是检测问题，而不是转换语法问题。非常感谢！！刚刚注意到您的更新答案并进行了测试，再次感谢；）刚刚注意到歪斜是唯一不起作用的部分。你知道为什么吗？感谢你的输入，它在Chrome中工作，但在FireFox 13 stable或14 Beta中仍然不工作。你用来测试的值是什么？scale=2，rotate=22，translate=22和22，skew=22和22，它在我的FireFox 12上工作。我相信这是您自己的问题，请使用错误控制台（ctrl+shift+j）查看是否存在为-moz transform指定非法值的警告。还可以使用firebug检查“预览”，查看

style.MozTransform

是否有价值。