Webkit和Moz轉換，取決於瀏覽器

我有一點Javascript檢測瀏覽器並根據瀏覽器對元素應用轉換。 Webkit可以在Chrome上正常工作，但Firefox不支持。有人可以告訴我，如果我下面的代碼是正確的：Webkit和Moz轉換，取決於瀏覽器

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)'; 
}

在此先感謝

來源

2012-06-09 Lodder

您不必測試引擎是哪個。只要給他們兩個分配樣式，瀏覽器就會接受它支持的樣式，而忽略另一個樣式。 – xiaoyi

我剛剛嘗試過您的建議，並再次在Chrome上工作，但不是Firefox – Lodder

您可以將代碼發佈到jsfiddle.net嗎？ – xiaoyi

// 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-09 16:46:46 artlung

再次，在Chrome上工作，但不是FireFox – Lodder

在Firefox 12.0/Mac中爲我工作。實際上，我不清楚你的問題是什麼。它是在檢測還是在應用轉換？有兩個問題，「不適用於Firefox」並不足以讓人們獲得幫助。 – artlung

這是不起作用的實際轉換。這裏是我的網站的鏈接。 http://joomjunk.co.uk/extras/css3-generator.html#transform如果您在其他選項卡上測試這些模塊，它們將起作用，但轉換不會。 – Lodder

這裏是解決方案：http://jsfiddle.net/Adu49/1/

由於您直接從輸入中讀取而沒有解析它，因此您可能會生成如下的CSS聲明：scale() translate(deg,deg)這顯然是非法的。在這種情況下，Firefox更願意放棄它，而Chrome更願意接受部分正確的聲明。這就是爲什麼你的代碼無法在Firefox上運行，但在Chrome上運行，並且在你填充所有字段後，它最終將在兩個瀏覽器上運行。

所以我把一些value || default在你的代碼，這將保證在輸入框爲空，適當的默認值設置（如果你想與用戶進行交互，你在這裏需要更多的驗證代碼。）

而且一些在這裏的話題。請改變你命名變量和元素的方式，這太混亂了。

來源

2012-06-09 17:01:48 xiaoyi

感謝您的輸入，在Chrome中工作，但它仍然無法在FireFox 13 stable或14 beta中工作 – Lodder

您曾經測試過的值有哪些？ – xiaoyi

scale = 2，rotate = 22，translate = 22和22，skew = 22和22 – Lodder

Webkit和Moz轉換，取決於瀏覽器

回答

相關問題