使用javascript設置供應商加前綴的CSS

...是一個巨大的痛苦。使用javascript設置供應商加前綴的CSS

var transform = 'translate3d(0,0,0)'; 
elem.style.webkitTransform = transform; 
elem.style.mozTransform = transform; 
elem.style.msTransform = transform; 
elem.style.oTransform = transform;

有沒有一個庫/框架/更好的方法來做到這一點？最好只用一行JS？

來源

2012-01-17 Ender

我不知道任何這樣做的庫，但如果它們全都只是前綴 - 也就是說，在名稱或語法上沒有區別 - 自己編寫函數將是微不足道的。

function setVendor(element, property, value) { 
    element.style["webkit" + property] = value; 
    element.style["moz" + property] = value; 
    element.style["ms" + property] = value; 
    element.style["o" + property] = value; 
}

然後你可以在大多數情況下使用它。

來源

2012-01-17 02:59:03

+16

請確保您大寫屬性名稱（'Transform'而不是'transform'）。我發現這很難... – 2013-06-12 20:11:38

有這麼照顧它這個jQuery插件 https://github.com/codler/jQuery-Css3-Finalize

來源

2012-01-17 09:46:26

他沒有要求一個jQuery的工具。 – 2015-02-28 22:24:42

@AdamArold他要求'圖書館/框架/更好的方式來做到這一點'。這可以是一個jQuery插件 – 2016-05-27 13:24:54

您可以使用JavaScript與下列代碼 -

var prefix = (function() { 
    var styles = window.getComputedStyle(document.documentElement, ''), 
    pre = (Array.prototype.slice 
     .call(styles) 
     .join('') 
     .match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o']) 
    )[1], 
    dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1]; 
    return { 
    dom: dom, 
    lowercase: pre, 
    css: '-' + pre + '-', 
    js: pre[0].toUpperCase() + pre.substr(1) 
    }; 
})();

上面找到相應的供應商前綴則返回各自的瀏覽器廠商的目標字首。

在我的腳本中保存了很多重複的代碼。

來源 - 戴維·沃爾什的博客：https://davidwalsh.name/vendor-prefix

來源

2015-07-21 13:03:34

請直接在這裏發佈你的外部鏈接答案的相關部分，因爲外部源可能會改變。 – IngoAlbers 2015-07-21 13:19:18

當然。謝謝... – 2015-07-24 05:39:06

這種方法的作用是在樣式聲明中始終存在一個供應商的前綴屬性。 – 2015-09-20 17:55:38

這是目前2015年末，形勢已經略有改變。首先，McBrainy關於上述資本化的評論很重要。 webkit前綴現在是Webkit，但幸運的是，此時只有Safari使用。現在Chrome和Firefox都支持el.style.transform而沒有前綴，我認爲IE也是如此。下面是針對當前任務的一個稍微更現代化的解決方案。它首先檢查，看看是否我們甚至需要前綴我們的轉換屬性：

var transformProp = (function(){ 
    var testEl = document.createElement('div'); 
    if(testEl.style.transform == null) { 
    var vendors = ['Webkit', 'Moz', 'ms']; 
    for(var vendor in vendors) { 
     if(testEl.style[ vendors[vendor] + 'Transform' ] !== undefined) { 
     return vendors[vendor] + 'Transform'; 
     } 
    } 
    } 
    return 'transform'; 
})();

之後，我們可以只使用一個簡單的一行調用一個元素上更新transform屬性：

myElement.style[transformProp] = 'translate3d(0,' + dynamicY + 'px,0)';

來源

2015-09-13 07:01:57 cacheflowe

似乎Firefox對非前綴轉換的支持現在非常普遍：http://caniuse.com/#search=transform – 2016-12-01 18:26:29

例如，如果您使用Gulp設置工作流程，則可以使用Postcss autoprefixer這是解決瀏覽器供應商前綴問題的便捷工具。它使用JS來轉換你的CSS。

來源

2017-02-27 13:16:01

使用javascript設置供應商加前綴的CSS

回答

相關問題