帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

非常好用的jquery 文本对比插件

帝国模板之家 2020-12-17 网页特效 评论

插件介绍

一个易于使用的jQuery文本对比插件,用于比较两个文本文档之间的不同之处,差异高亮显示。

兼容的浏览器

Chrome, IE9+, FireFox, Opera, Safari

使用说明

1. 创建两个textarea元素,在其中插入要比较的文本。

<textarea required id="refSentence">
 帝国模板 之家
</textarea>

<textarea required id="mySentence">
 帝国之家 模板
</textarea>

2. 创建一个按钮来查找文本之间的差异。

<button type="button" id="submit" onclick="buttonClick()">
  查找不同之处
</button>

3. 创建一个输出容器来保存结果。

<code id="output"></code>

4. 在html页面底部加载jQuery库和文本对比插件文件。

<script src="jquery.min.js"></script>
<script src="app.js"></script>

5. 文本对比css样式代码。

.new {
  color: green;
}

.del {
  text-decoration: line-through;
  color: red;
}

.shifted {
  color: darkblue;
}

.normal {
  color: gray;
}
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言