V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
tool2d
V2EX  ›  前端开发

让 jquery 使用 tailwind css 的缩写语法。

  •  
  •   tool2d · 2021-12-19 03:46:45 +08:00 · 977 次点击
    这是一个创建于 1074 天前的主题,其中的信息可能已经有所发展或是发生改变。

    jquery 有一个 html()函数,是设置 innerHTML 的,重载一下,搜索 HTML 文本字符串,把内部所有<div style=""></div>的 style 文本提取出来。

    按照分号或空格切分原则,分成多个字符串集合,再查找 bg-none 之类没有冒号的内联样式,写代码转换成 background:none

    于是乎

    $("#app").html("<div style='px-6 py-2 border-none bg-none text-green-600 font-bold nowrap'></div>");

    就自动转换成了

    $("#app").html("<div style='padding-left: 24px;padding-right: 24px;padding-top: 8px;padding-bottom: 8px;border:none;background:none;color:#16a34a;font-weight: 700;white-space:nowrap;'></div>");

    用缩写也算是增加了代码的可读性。

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5342 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 05:45 · PVG 13:45 · LAX 21:45 · JFK 00:45
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.