js设置文字颜色的方法示例


Posted in Javascript onDecember 30, 2016

本文实例讲述了js设置文字颜色的方法。分享给大家供大家参考,具体如下:

<h1>aaabbbccc</h1>

不允许在h1标签中添加任何字符,可以通过css或js定义,使其aaa为红色bbb为黄色ccc为蓝色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.adKeyword {
    color: #FF0000;
}
-->
</style>
</head>
<body>
<h1>aaabbbccc</h1>
</body>
</html>
<script language="JavaScript" type="text/javascript"><!--
if(document.createRange){
    var range = document.createRange();
}else
    var range = document.body.createTextRange();
if(range.findText){
    while(range.findText("a")){
       range.pasteHTML(range.text.fontcolor("#ff0000"));
       range.collapse(true);
    }
}else{
    var s,n;
    s = window.getSelection();
    while(window.find("a")){
       var n = document.createElement("SPAN");
       n.style.color="#ff0000"
       s.getRangeAt(0).surroundContents(n);
    }
}
if(range.findText){
    while(range.findText("c")){
       range.pasteHTML(range.text.fontcolor("#0000ff"));
       range.collapse(true);
    }
}else{
    var s,n;
    s = window.getSelection();
    while(window.find("c")){
       var n = document.createElement("SPAN");
       n.style.color="#ff0000"
       s.getRangeAt(0).surroundContents(n);
    }
}
if(range.findText){
    while(range.findText("b")){
       range.pasteHTML(range.text.fontcolor("#ffff00"));
       range.collapse(true);
    }
}else{
    var s,n;
    s = window.getSelection();
    while(window.find("b")){
       var n = document.createElement("SPAN");
       n.style.color="#ff0000"
       s.getRangeAt(0).surroundContents(n);
    }
}
//-->
</script>
Javascript 相关文章推荐
jQuery的deferred对象使用详解
Aug 20 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
自己动手写的jquery分页控件(非常简单实用)
Oct 28 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
JavaScript 用fetch 实现异步下载文件功能
Jul 21 Javascript
利用ES6实现单例模式及其应用详解
Dec 09 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
原理深度解析Vue的响应式更新比React快
Apr 04 Javascript
react合成事件与原生事件的相关理解
May 13 Javascript
Node.js的Mongodb使用实例
Dec 30 #Javascript
jQuery实现的仿百度,仿谷歌搜索下拉框效果示例
Dec 30 #Javascript
原生JS实现图片左右轮播
Dec 30 #Javascript
零基础轻松学JavaScript闭包
Dec 30 #Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 #Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
Dec 30 #Javascript
bootstrap表格分页实例讲解
Dec 30 #Javascript
You might like
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
php的mkdir()函数创建文件夹比较安全的权限设置方法
2014/07/28 PHP
PHP实现的堆排序算法详解
2017/08/17 PHP
php格式文件打开的四种方法
2018/02/24 PHP
音乐播放用的的几个函数
2006/09/07 Javascript
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
Bootstrap选项卡与Masonry插件的完美结合
2016/07/06 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
微信小程序 购物车简单实例
2016/10/24 Javascript
基于zepto.js实现登录界面
2017/10/09 Javascript
详解webpack性能优化——DLL
2017/10/20 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
JavaScript继承的特性与实践应用深入详解
2018/12/30 Javascript
微信小程序实现文件、图片上传功能
2020/08/18 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
Python实现二分法算法实例
2015/02/02 Python
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
研究Python的ORM框架中的SQLAlchemy库的映射关系
2015/04/25 Python
python使用socket进行简单网络连接的方法
2015/04/29 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
使用pyshp包进行shapefile文件修改的例子
2019/12/06 Python
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
如何理解transaction事务的概念
2015/05/27 面试题
二手房购房意向书范本
2014/04/01 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
创业计划书之闲置物品置换中心
2019/12/25 职场文书
vue实现Toast组件轻提示
2022/04/10 Vue.js
【D4DJ】美少女DJ企划 动画将于明年冬季开播第2季
2022/04/11 日漫