超简单修改富文本字体样式

最近一直使用React 做项目,之前有个简单的需求:新闻详情页面,设置大、中、小三种字体,可以动态调整。
我一听很简单啊,动态设置新闻详情 的容器div的样式就好了。
大概是这样的…

//三种字体类型来回切换
changeFontSize(type){
    switch (type) {
        case 0:
            return 1;
        case 1:
            return -1;
        case -1:
            return 0;
    }
}
//动态 改变 type 0 默认 1 大 -1 小 改变新闻内容大小
getFontSize(type){
    switch (type) {
        case 0:
            return {fontSize:'0.48rem',lineHeight:'0.72rem'};
        case 1:
            return {fontSize:'0.58rem',lineHeight:'0.82rem'};
        case -1:
            return {fontSize:'0.36rem',lineHeight:'0.60rem'};
    }
}

//render 内容
<div className="news-content-main"
     id={'news-content-main-html'}
     style={this.getFontSize(this.state.contentSizeType)}
     dangerouslySetInnerHTML={{ __html: this.state.data.content }}/>
     
   
//最后只需要在用户点击的地方调用  contentSizeType 默认0
this.setState({contentSizeType:this.changeFontSize(this.state.contentSizeType)});

看就是这么简单嘛,然后我就提交测试了。
测试测试之后,也没有发现问题,皆大欢喜,好的,上线啦!!
第二天,用户反馈,他们点击字体设置放大缩小,字体并没有放大缩小,只是看到了,行间距的变化。
我心想,不可能啊,我就去验证。
结果发现,用户发布的新闻内容类似这样的…

<p style="font-size:16px;color:#333333;text-align:justify;font-family:arial;background-color:#FFFFFF;">
    <span>最近有爆料显示,苹果正在打造一款超低价位的iPhone,预期价位在200-300美元之间,这和人民币大约是1400元左右。</span> 
</p>
<p style="font-size:16px;color:#333333;text-align:justify;font-family:arial;background-color:#FFFFFF;">
    <span>不过这也仅仅是目前的爆料,真实性无法得到保证,不过如果真的有这一研发计划,苹果可能会用上A13处理器。</span> 
</p>

而如果放入我们的代码中,应该是这样的…

<div style={{fontSize:'0.48rem',lineHeight:'0.72rem'}}>
<p style="font-size:16px;color:#333333;text-align:justify;font-family:arial;background-color:#FFFFFF;">
    <span>最近有爆料显示,苹果正在打造一款超低价位的iPhone,预期价位在200-300美元之间,这和人民币大约是1400元左右。</span> 
</p>
<p style="font-size:16px;color:#333333;text-align:justify;font-family:arial;background-color:#FFFFFF;">
    <span>不过这也仅仅是目前的爆料,真实性无法得到保证,不过如果真的有这一研发计划,苹果可能会用上A13处理器。</span> 
</p>
</div>

只要是一个有点前端知识的人都能够看出来,问题出现在了哪里?
没错,用户编辑的内容,p标签自带字体样式,优先级,比我设置的要高,但是并没有行间距设置,所以我们只能看到行间距的变化,却看不到字体大小的变化。
那么这个该怎么办呢?
我们有两个需求:
1、改变字体大小。
2、如果每个段落的字体大小不一致,那么最好能够成比例的放大缩小,而不是设置统一的字体大小。
整理下思路,我们如果实现上面的目标,那么需要能够获取到所有的富文本标签,并且对有字体大小样式的标签,重新设置字体大小。
于是我想到了 element. children ,直接上代码

let arr = [];//用来存放获取到的所有的标签
let arrFontSize = [];//用来存放获取到的所有的标签原来字体大小

//获取富文本所有子标签
getAllTags(obj){
    for(let i=0;i<obj.length;i++){
        if(obj[i].children){//当前元素还存在子元素的时候,递归
            this.getAllTags(obj[i].children);
        }
        //如果有fontSize样式 就保存下来
        if(obj[i].style.fontSize) {
            arr.push(obj[i]); //遍历到的元素添加到arr这个数组中间
            arrFontSize.push(parseInt(obj[i].style.fontSize.substring(0, obj[i].style.fontSize.length - 2)));//保存原标签字体大小
        }
    }
}

//设置字体大小  如果你还有其他需求 同样可以设置
setFontSize(base){
  arr.map((item,index)=>{
        item.style.fontSize=arrFontSize[index]*base+'px';
        item.style.lineHeight=arrFontSize[index]*base*1.7+'px';//这里同时 等比例的设置行间距
  });
}


 //获取到富文本并且渲染之后,获取所有的标签
this.getAllTags(document.getElementById('news-content-main-html').children);

瞧一瞧,就是这么简单…
这就完了么?
是的,但是请记得,如果富文本没有自带字体大小的样式的话,第二部分的代码也是不能生效的。
所以上面的代码同时使用,方能万无一失。

更多内容,欢迎同步关注作者公众号二维码!
程序员内功修炼手册 主要发布计算机基础、设计模式、计算机网络基础知识,同时重点关注大前端知识
Android、iOS、web前端、Flutter、React Native等,想学习大前端知识的速度来吧,一起学习、一起成长!
qrcode_for_gh_f730c342ff6e_344.jpg

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值