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 で機能するのはそのためです。すべてのフィールドに入力すると、最終的に両方のブラウザーで機能します。

これvalue || defaultにより、入力ボックスが空のときに適切なデフォルト値が設定されることが保証されます (ユーザーとやり取りしたい場合は、ここにさらに検証コードが必要です)。

そして、ここでいくつかのオフトピック。変数と要素の命名方法を変更してください。混乱しすぎます。

于 2012-06-09T17:01:48.267 に答える