需求：因為有一段html需要傳遞到其他的地方，內聯樣式可能與其他的樣式沖突，所以要將寫在style標簽中的內聯樣式轉換為行內樣式

思路：

?

/*** 參數接收html字符串* 將內聯樣式表里面的樣式改為行內樣式* */transStyle(html){/*** 檢測有沒有style標簽* */const h = $(html)[0]const style = h.getElementsByTagName('style')[0]if(!style) return htmlconst shtml = style.innerHTML.replace(/\n\s*/g,'')/*** 解析類名，暫時只處理類名。* */let s1 = shtml.split('}')s1 = s1.filter(item=>item!=="")const styleMap = this.generateStyleMap(s1)styleMap.forEach((val,key)=>{/*** 根據key類名獲取元素* 為元素添加val 行內樣式* */const elements = h.getElementsByClassName(key)let v = val.replace(/\s*/g,'')if(v[v.length-1]==';')v = v.slice(0,-1)Array.prototype.forEach.call(elements, function (element) {const s = element.getAttribute('style')if(!s){element.setAttribute('style',v)}else{if(s[s.length-1]==';') element.setAttribute('style',s+v)else element.setAttribute('style',s+";"+v)}});})style.parentNode.removeChild(style)return h.outerHTML}generateStyleMap(arr){const m = new Map()arr.forEach(item=>{let s2 = item.split('{')if(!(/,/).test(s2[0])){const k = s2[0].slice(1)this.addStyleMapItem(m,k,s2[1])}else{let s3 = s2[0].split(',')s3=s3.map(item=>item.slice(1))s3.forEach(i=>{this.addStyleMapItem(m,i,s2[1])})}})return m}addStyleMapItem(map,key,addItem){if(map.has(key)){let v = map.get(key).trim()if(v[v.length-1]!==';') v=v+";"v = map.get(key)+addItemmap.delete(key)map.set(key,v)}else{map.set(key,addItem)}}

總結

以上是生活随笔為你收集整理的将html中的style内联样式转换为行内样式的全部內容，希望文章能夠幫你解決所遇到的問題。

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