前言

在用vue寫一個項目時，編譯時vue-loader會自動給css加上合適的前綴，無需手動添加，無疑方便了很多。但是過程中，經常要用js動態添加樣式，如此添加的樣式就需要手動添加瀏覽器前綴了。相當的麻煩，還容易出錯。下面介紹一種解決方法供大家參考。

獲取樣式表

首先的獲取該瀏覽器支持的樣式表，可以通過創建一個空標簽來獲取

var sty = document.createElement("div").style復制代碼

通過chrome控制臺打印出來是這樣的(ps: 不同瀏覽器結果不同)

遍歷樣式表

現在前綴主要有這四種：webkit,moz,o,ms
通過遍歷來匹配對應的前綴并返回

var vendor = (() => {let transformNames = {webkit: 'webkitTransform',moz: 'mozTransform',ms: 'msTransform',o: 'oTransfrom',Default: 'transform'};for(let key in transformNames) {if(sty[transformNames[key]] !== undefined) {return key;}}// 若都找不到，說明這個瀏覽器有毛病啦return false; })();復制代碼

使用

最后再封裝成函數，即可使用了

function prefixStyle(style) {if(vendor === false) {return false;}if(vendor === 'Default') {return style;}// 對應前綴 + 首字母大寫 + 剩余部分return vendor + style.charAt(0).toUpperCase() + style.substr(1); }復制代碼

測試

以上就是js中的css prefix。歡迎大家分享更多的解決辦法。

總結

以上是生活随笔為你收集整理的js操作样式自动prefix的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。