前言

在用vue寫一個(gè)項(xiàng)目時(shí)，編譯時(shí)vue-loader會(huì)自動(dòng)給css加上合適的前綴，無(wú)需手動(dòng)添加，無(wú)疑方便了很多。但是過(guò)程中，經(jīng)常要用js動(dòng)態(tài)添加樣式，如此添加的樣式就需要手動(dòng)添加瀏覽器前綴了。相當(dāng)?shù)穆闊?#xff0c;還容易出錯(cuò)。下面介紹一種解決方法供大家參考。

獲取樣式表

首先的獲取該瀏覽器支持的樣式表，可以通過(guò)創(chuàng)建一個(gè)空標(biāo)簽來(lái)獲取

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

通過(guò)chrome控制臺(tái)打印出來(lái)是這樣的(ps: 不同瀏覽器結(jié)果不同)

遍歷樣式表

現(xiàn)在前綴主要有這四種：webkit,moz,o,ms
通過(guò)遍歷來(lái)匹配對(duì)應(yīng)的前綴并返回

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;}}// 若都找不到，說(shuō)明這個(gè)瀏覽器有毛病啦return false; })();復(fù)制代碼

使用

最后再封裝成函數(shù)，即可使用了

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

測(cè)試

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。