微信小程序富文本内容样式修改
一、使用js操作
1、方式,在获取api返的数据时操作
// 获取文章
getArtic(){
wx.request({
url: `${app.data.getUrl}/api/News/GetFormJson`,
method:"GET",
data:{
Id: this.data.query.Id
},
success: ({data:res})=>{
// 添加样式
var _content = (res.Data.NewsContent).replaceAll('<img','<img style="float: left;width:100%";display: inline-block;height: auto;')
if(_content.indexOf('<p><img')){
_content=_content.replaceAll('<p id="feb-content" style="margin-left:2em"><img','<p id="feb-content" style="font-size:0;"><img')
}
res.Data.NewsContent= _content
// 设置返回数据
this.setData({
articleContent: res.Data
})
}
})
},
css样式操作
text
为Class类名,添加相关属性样式
.text [alt] {
width: 100%;
margin-left: -2em;
}
.text [style] {
display: table;
text-align: justify;
word-break: break-word;
word-break: break-all;
width: 100%;
padding-top: 1em;
text-indent: 2em;
font-size: 0;
line-height: 36rpx;
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 25岁的心里话
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现