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 中{},[]中括号,大括号使用详解
May 12 Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
浅析JS抽象工厂模式
Dec 14 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
Mar 14 Javascript
怎么理解wx.navigateTo的events参数使用详情
May 18 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
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
PHP HTML代码串 截取实现代码
2009/06/29 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
php 如何获取文件的后缀名
2016/06/05 PHP
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
2013/01/23 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
2013/05/14 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
js实现全屏漂浮广告移入光标停止移动
2013/12/02 Javascript
jquery sortable的拖动方法示例详解
2014/01/16 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
JQuery删除DOM节点的方法
2015/06/11 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
D3.js进阶系列之CSV表格文件的读取详解
2017/06/06 Javascript
three.js搭建室内场景教程
2018/12/30 Javascript
JavaScript继承与聚合实例详解
2019/01/22 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
vue集成chart.js的实现方法
2019/08/20 Javascript
JS数组方法slice()用法实例分析
2020/01/18 Javascript
js+css实现全屏侧边栏
2020/06/16 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
[00:53]TI3正赛第三天 DK怒破A队不败金身 现场国旗飘扬热血激昂
2013/08/10 DOTA
对python中for、if、while的区别与比较方法
2018/06/25 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
canvas实现圆绘制的示例代码
2019/09/11 HTML / CSS
游戏商店:Eneba
2020/04/25 全球购物
机关党员三严三实心得体会
2014/10/13 职场文书
2014年财务部工作总结
2014/11/11 职场文书
2016中秋节问候语
2015/11/11 职场文书
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python
讲解Python实例练习逆序输出字符串
2022/05/06 Python