将html中的style内联样式转换为行内样式

需求：因为有一段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内联样式转换为行内样式相关推荐

html中内联元素排列对齐原理,html标签中的内联元素（行内元素）详解
html内联元素,也叫行内元素,相邻的多个内联元素是水平横向排列显示在同一行,其宽度随内容的变化而变化,在同一行显示多个内容,就可以使用内联元素来实现,这样就不需要将块级元素设置为浮动或绝对定位也能在 ...
CSS中块级元素，行内块元素，行内元素的特点
CSS自学笔记目录一.什么是元素显示模式二.CSS的元素显示模式 1.块元素 2.行内元素 3.行内块元素前言网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我 ...
html 在盒子中字体垂直,第五章,css行内盒模型和文字样式
一,盒模型发现默认样式,会破坏布局,比如p标签的默认样式 p标签默认样式从图片中我们可以看到我们并没有加margin值,可是左边依然有空隙出现,这就是p标签的默认样式,那我们怎么去掉一些会破坏我们 ...
html h1转换为行内,css中转换为行内样式的解决方案(css-inline)
聊聊场景发送邮件在第三方网站中嵌入HTML 从其他编辑器拷贝编辑好的文章发布到微信.今日头条等自媒体在以上场景使用行内样式的兼容性要高很多,也可以保持原样式不变解决方案这两种方案功能和 Ap ...
怎么修改html行内样式表,原生JS获取及设置CSS样式-1.行内样式
面试中,应该会经常被问到样式的写法以及如何使用原生JS获取及操作样式的问题吧,让我给大家总结一下~ HTML中样式的写法不外乎以下四种方式行内样式假装有内容 head内部样式 div { widt ...
css中标签显示模式、块元素、行内元素、行内块元素、显示模式转换
标签显示模式display: HTML标签一般分为块标签(块元素:block-level)和行内标签(行内元素:inline-level)两种类型,但是还有第三种说法行内块元素:table-row-g ...
抽象数据类型(顺序栈)、断言、包含头文件、内联函数、非内联成员函数[C++ In Action][4]...
1. C++中的接口与实现思想, 即类的定义.数据成员的定义.函数原型在接口文件中进行, 实现代码放在实现文件中 2. 函数调用开销:调用前要先保存寄存器,并在返回点恢复:复制实参:程序必须转入一个新 ...
C++的内联函数和非内联函数的区别
一.内联函数和非内联函数的定义 1.内联函数 inline void test(); void test() { cout<<"test"<<endl; } ...
【内联元素居中、内联块元素居中、区块元素居中】06
居中文章目录居中 1. 文字.内联元素.内联块元素在父元素居中 2. 区块元素在父元素中居中 3. 练习 1. 文字.内联元素.内联块元素在父元素居中文字.内联元素居中. 父元素设置:text- ...

将html中的style内联样式转换为行内样式

将html中的style内联样式转换为行内样式相关推荐

最新文章

热门文章