我是靠谱客的博主 伶俐果汁,最近开发中收集的这篇文章主要介绍js 匹配 img标签 增加 style样式,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

给img标签增加 style样式:

1、如果img 标签没有style 就先添加style标签

2、添加标签后统一再添加style样式

   function  imgTagAddStyle (htmlstr) {
      // 正则匹配所有img标签
      // var regex0 = new RegExp("(i?)(<img)([^>]+>)","gmi");
      // 正则匹配不含style="" 或 style='' 的img标签
      // eslint-disable-next-line no-useless-escape
      var regex1 = new RegExp("(i?)(<img)(?!(.*?style=['"](.*)['"])[^>]+>)", 'gmi')
      // 给不含style="" 或 style='' 的img标签加上style=""
      htmlstr = htmlstr.replace(regex1, '$2 style=""$3')
      console.log('增加style=""后的html字符串:' + htmlstr)
      // 正则匹配含有style的img标签
      // eslint-disable-next-line no-useless-escape
      var regex2 = new RegExp("(i?)(<img.*?style=['"])([^>]+>)", 'gmi')
      // 在img标签的style里面增加css样式(这里增加的样式:display:block;max-width:100%;height:auto;border:5px solid red;)
      htmlstr = htmlstr.replace(regex2, '$2max-width:100%;height:auto;$3')
      console.log('在img标签的style里面增加样式后的html字符串:' + htmlstr)
      return htmlstr
    }

 

最后

以上就是伶俐果汁为你收集整理的js 匹配 img标签 增加 style样式的全部内容,希望文章能够帮你解决js 匹配 img标签 增加 style样式所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(63)

评论列表共有 0 条评论

立即
投稿
返回
顶部