css 转成 html标签,html标签属性转成style

该博客介绍了一种将XML中color和size属性转换为HTML内联样式的函数attr2style()。该函数通过创建临时DOM元素,解析color和size属性,并将它们转化为合适的CSS样式。由于size值可能不一致且不推荐使用,函数会尝试将其转换为font-size。此方法适用于处理遗留的font属性,并提供了一种正则表达式处理的解决方案。
摘要由CSDN通过智能技术生成

这个是为了转下xml上的color和size的属性的,被遗弃的font这个是支持的,但是size这个值跟现在的font-size不一致,再加上标准的也不再建议使用,所以才有下面的方法,当然也可以参考jquery或者zepto的方式来做,基本上是正则来处理的~

使用:attr2style('hellojs')

function attr2style(html){

const oBox = document.createElement('div')

oBox.innerHTML = html

if(oBox.childElementCount === 0) return html;

let hook = []

Array.prototype.slice.call(oBox.childNodes).map(function(el){

if(el.nodeType === 1){

let styles = {

color:el.getAttribute('color'),

size:el.getAttribute('size') ? el.getAttribute('size') + 'px' : 'initial'

}

el.style.cssText = `font-size:${styles.size};color:${styles.color};`

hook.push(el.outerHTML)

}else if(el.nodeType === 3){

hook.push(el.nodeValue)

}

})

return hook.join('')

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值