Webkit 和 Moz Transform，具体取决于浏览器

Webkit and Moz Transform, depending on browser

本文关键字：取决于 浏览器 Moz Transform Webkit      更新时间：2023-09-26

我有一些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;
}

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

由于您直接从输入中读取而不对其进行解析，因此您可以生成 CSS 声明，例如： scale() translate(deg,deg)这显然是非法的。在这种情况下，Firefox 更喜欢删除它，而 Chrome 更喜欢接受部分正确的声明。这就是为什么你的代码在Firefox上不起作用，而是在Chrome上工作，并且在你填写所有字段后，它最终将在两个浏览器上运行。

所以我在你的代码中放置了一些value || default，这将保证在输入框为空时设置正确的默认值（如果你想与用户交互，你需要在这里有更多的验证代码。

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

相关文章：