微信小程序template富文本插件image宽度被js强制设置

这段时间一直做微信小程序,过程中遇到了一个问题,这个问题一直没有得到完美的解决。

问题描述:

  在Web编程中经常会引入template插件,这个插件是封装好,我们通常的做法是直接引入,配置简单,好用,一直都没出现什么大问题。但是这次在微信小程序上,问题就出现了。

因为手机屏幕普遍和PC比小很多,template正常情况下我们给content一个padding:1 30rpx 40rpx 30rpx;时富文本内容在手机屏幕上显示时两边有留白,页面会好看,也为了用户手握手机是不回方便看文本。

  文本内容设置padding后就成功,但是image在其中就超出屏幕显示区域了(如下图)

微信小程序template富文本插件image宽度被js强制设置

严重影响页面展示!

为了解决这个问题,我前后断断续续用了三四天时间;解决办法其实很简单!

我在控制台中查看image的样式,最不明白的就是element.style (如图)

微信小程序template富文本插件image宽度被js强制设置

看见图中的width:365px;这是怎么设置的,我猜应该是js代码动态生成的,上网一查,果不其然这是js文件根据不同的屏幕尺寸动态设置的image宽度。怎么办?我难道要去找那段js代码吗?这样工作可想而知

那怎么解决呢?

element.style根本就不存在啊!

办法很就是:!important

没错,这个东西的作用就是提高指定CSS样式规则的应用优先权。

就是说:这个东西可以覆盖掉element.style里面的属性

于是我就增加了这段代码:

微信小程序template富文本插件image宽度被js强制设置

 

这个问题就解决了!

 

最后:具体这个js代码在哪我也没有去深究,问题也算解决了!现在就好了(如图);

微信小程序template富文本插件image宽度被js强制设置

微信小程序template富文本插件image宽度被js强制设置

上一篇:微信支付之扫码支付、公众号支付、H5支付、小程序支付相关业务流程分析总结


下一篇:谷歌浏览器 chrome 80+版本显示全地址 www和http