将HTML的<style>样式,变为行内样式

这里我们要借助Jsoup这个工具进行处理。
原理就是现将style标签的内容封装为一个Map,然后在获取所有拥有class的标签,将map和class一一对应,最后写入行中。
没啥可说的,直接撸袖子干。

    private static String replaceClass(Map<String, String> styMap, String html) {
        org.jsoup.nodes.Document doc = Jsoup.parse(html);
        Elements anyClass = doc.getElementsByAttribute("class");
        for (Element element : anyClass) {
            String aClass = element.attr("class");
            System.out.println(aClass);
            String[] classStrs = (aClass.split(" "));
            for (String classStr : classStrs) {
                element.attr("style", element.attr("style") + styMap.get(classStr));
            }
            element.removeAttr("class");
        }
        return doc.toString();
    }

    private static String formatHtmlRowCss(String html) {
        org.jsoup.nodes.Document jsoup = Jsoup.parse(html);
        JXDocument doc = new JXDocument(html);
        String allcss = jsoup.getElementsByTag("style").html();
        Map<String, String> styleMap = new HashMap<>();
        Pattern pattern = Pattern.compile("\\.(\\w+)\\{(?s)(.+?)\\}");
        Matcher matcher = pattern.matcher(allcss);
        while (matcher.find()) {
            styleMap.put(matcher.group(1), matcher.group(2));
        }
        return Word2HtmlUnit.replaceClass(styleMap, html);
    }

这里我只替换了简单的class,如果有其他需求请只管加,因为题主这里只需要class样式,所以并没有写的很通用。jsoup支持css表达式,所以前期不要按照”.”去分割,直接将“#XXX”“.XXX””XXX>XXX”这样的形式封装到map中,替换时,直接通过这个名字去查找元素。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以通过修改CSS样式来实现水平分布。具体方法如下: 1. 将ul的display属性设置为flex,使其变为弹性盒子。 2. 将li的display属性设置为inline-block,使每个li元素变为内块元素。 3. 将content的display属性设置为flex,使其变为弹性盒子。 4. 将每个content div元素的flex属性设置为1,使它们平分content的宽度。 5. 将img元素的max-width属性设置为100%,使其自适应父元素宽度。 修改后的代码如下: ``` <style> .wrapper { display: flex; justify-content: center; } #left { display: flex; list-style: none; margin: 0; padding: 0; } #left li { display: inline-block; margin-right: 10px; } #content { display: flex; flex-wrap: wrap; justify-content: center; } #content div { flex: 1; margin: 10px; } img { max-width: 100%; } </style> <body> <div class="wrapper"> <ul id="left"> <li><a href="#">女靴</a></li> <li><a href="#">雪地靴</a></li> <li><a href="#">冬裙</a></li> <li><a href="#">呢大衣</a></li> <li><a href="#">毛衣</a></li> <li><a href="#">棉服</a></li> <li><a href="#">女裤</a></li> <li><a href="#">羽绒服</a></li> <li><a href="#">牛仔裤</a></li> <li><a href="#">男包</a></li> </ul> <div id="content"> <div> <a href="#"><img src="images/女靴.jpg" /></a> </div> <div> <a href="#"><img src="images/雪地靴.jpg" /></a> </div> <div> <a href="#"><img src="images/冬裙.jpg" /></a> </div> <div> <a href="#"><img src="images/呢大衣.jpg" /></a> </div> <div> <a href="#"><img src="images/毛衣.jpg" /></a> </div> <div> <a href="#"><img src="images/棉服.jpg" /></a> </div> <div> <a href="#"><img src="images/女裤.jpg" /></a> </div> <div> <a href="#"><img src="images/羽绒服.jpg" /></a> </div> <div> <a href="#"><img src="images/牛仔裤.jpg" /></a> </div> <div> <a href="#"><img src="images/男包.jpg" /></a> </div> </div> </div> </body> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值