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 相关文章推荐
数组方法解决JS字符串连接性能问题有争议
Jan 12 Javascript
另一个javascript小测验(代码集合)
Jul 27 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
jQuery判断对象是否存在的方法
Feb 05 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
vue通过style或者class改变样式的实例代码
Oct 30 Javascript
JavaScript实现好看的跟随彩色气泡效果
Feb 06 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 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
实用函数4
2007/11/08 PHP
微信支付开发订单查询实例
2016/07/12 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
DOM基础教程之使用DOM控制表单
2015/01/20 Javascript
快速掌握Node.js事件驱动模型
2016/03/21 Javascript
基于Echarts 3.19 制作常用的图形(非静态)
2016/05/19 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
前端主流框架vue学习笔记第一篇
2017/07/26 Javascript
vue 项目常用加载器及配置详解
2018/01/22 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
javascriptvoid(0)含义以及与&quot;#&quot;的区别讲解
2019/01/19 Javascript
微信小程序class封装http代码实例
2019/08/24 Javascript
[44:15]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第二局
2016/03/06 DOTA
[51:06]2018DOTA2亚洲邀请赛3月29日 小组赛A组 KG VS Liquid
2018/03/30 DOTA
Python 除法小技巧
2008/09/06 Python
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
python爬取亚马逊书籍信息代码分享
2017/12/09 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
Python银行系统实战源码
2019/10/25 Python
使用keras框架cnn+ctc_loss识别不定长字符图片操作
2020/06/29 Python
移动Web—CSS为Retina屏幕替换更高质量的图片
2012/12/24 HTML / CSS
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
微软新西兰官方网站:Microsoft New Zealand
2018/08/17 全球购物
英国最受欢迎的价格比较网站之一:MoneySuperMarket
2018/12/19 全球购物
生物学学生自我评价
2014/01/17 职场文书
校车安全责任书
2014/08/25 职场文书
学校纪律作风整改措施思想汇报
2014/10/11 职场文书
话题作文之自信作文
2019/11/15 职场文书