Colorful Text JS Demo

将标签内文字颜色设定为两种预设颜色的渐变。渐变在标签滚动宽度（scrollWidth）上排布。（示例1、2、3）
稳定性：标签宽度固定时，字符颜色由其在标签内的横坐标位置决定，与每行文字长短、行数无关。（示例1、5、6）
动态性：在文字和标签宽度发生变化时自动重新设置。（示例4）
进行转换的标签只能包含文字和 <br> 标签，不能包含其他下级标签（将被移除）。
支持不同种类标签，如 <div>、<p>、<pre> 等。
浏览器兼容性要求：MutationObserver和ResizeObserver。

使用方法：

对需要设置颜色的标签设置 class="colorful-text-js" data-color-left="..." data-color-right="..."（支持常见颜色格式如 "#ffffff" "#fff" "rgb(0, 0, 0)" "red" 等）。
在文档末尾加载以下js文件:


    <script src="colorful-text.js"></script>

效果：

1 `<p>` 标签静态文本（可尝试改变浏览器窗口大小观察效果）：

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
1994 年的一期《Before & After》杂志将“Lorem ipsum ...”追溯到 de Finibus Bonorum et Malorum（西塞罗在公元前 45 年撰写的伦理学理论方面的论文）中一段文字的混乱的拉丁语版。段落“Lorem ipsum ...”摘选自文字“Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit ...”，可以翻译为“没有人喜欢痛苦，追逐痛苦并且想拥有痛苦，因为痛苦就是痛苦...”


    <p class="colorful-text-js" data-color-left="#dd0033" data-color-right="deepskyblue">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <br>
        1994 年的一期《Before & After》杂志将“Lorem ipsum ...”追溯到 de Finibus Bonorum et Malorum（西塞罗在公元前 45 年撰写的伦理学理论方面的论文）中一段文字的混乱的拉丁语版。段落“Lorem ipsum ...”摘选自文字“Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit ...”，可以翻译为“没有人喜欢痛苦，追逐痛苦并且想拥有痛苦，因为痛苦就是痛苦...”
    </p>

2 `<pre>` 标签静态文本（文字卷动效果）：

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


    <pre class="colorful-text-js" data-color-left="#dd0033" data-color-right="deepskyblue">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </pre>

3 自适应内容宽度：

春晓
唐孟浩然
春眠不觉晓，处处闻啼鸟。
夜来风雨声，花落知多少。


    <div class="colorful-text-js" style="display:inline-block" data-color-left="#dd0033" data-color-right="deepskyblue">
        春晓<br>
        唐 孟浩然<br>
        春眠不觉晓，处处闻啼鸟。<br>
        夜来风雨声，花落知多少。
    </div>

4 动态内容 + 自适应宽度：

在此行继续输入...


    <textarea style="width:100%" oninput="document.getElementById('text-output').innerHTML=value">在此行继续输入...</textarea>
    <p id="text-output" class="colorful-text-js" style="display:inline-block" data-color-left="#dd0033" data-color-right="deepskyblue">在此行继续输入...</p>

5 文字居中效果：

离骚（节选）
先秦屈原
长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。
既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。


    <p class="colorful-text-js" style="text-align:center" data-color-left="#dd0033" data-color-right="deepskyblue">
        离骚（节选）<br>
        先秦 屈原<br>
        长太息以掩涕兮，哀民生之多艰。余虽好修姱以鞿羁兮，謇朝谇而夕替。<br>
        既替余以蕙纕兮，又申之以揽茝。亦余心之所善兮，虽九死其犹未悔。
    </p>

6 文字右对齐效果：

孙子荆年少时欲隐，语王武子“当枕石漱流”，误曰“漱石枕流”。王曰：“流可枕，石可漱乎？”孙曰：“所以枕流，欲洗其耳；所以漱石，欲砺其齿。”
《世说新语·排调》


    <p class="colorful-text-js" style="text-align:right" data-color-left="#dd0033" data-color-right="deepskyblue">
        孙子荆年少时欲隐，语王武子“当枕石漱流”，误曰“漱石枕流”。王曰：“流可枕，石可漱乎？”孙曰：“所以枕流，欲洗其耳；所以漱石，欲砺其齿。”<br>
        《世说新语·排调》
    </p>