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中的undefined,null,&quot;&quot;,0和false
Mar 08 Javascript
一些不错的js函数ajax
Aug 20 Javascript
javascript offsetX与layerX区别
Mar 12 Javascript
jQuery+css实现图片滚动效果(附源码)
Mar 18 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
Oct 23 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
Jul 22 jQuery
使用zrender.js绘制体温单效果
Oct 31 Javascript
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
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
php不用正则采集速度探究总结
2008/03/24 PHP
php在window iis的莫名问题的测试方法
2013/05/14 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
Fatal error: session_start(): Failed to initialize storage module: files问题解决方法
2014/05/04 PHP
php读取本地json文件的实例
2018/03/07 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
javascript十个最常用的自定义函数(中文版)
2009/09/07 Javascript
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
javascript表单验证和Window详解
2014/12/11 Javascript
jquery实现动态操作select选中
2015/02/11 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
使用BootStrap和Metroui设计的metro风格微网站或手机app界面
2016/10/21 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
vue中使用codemirror的实例详解
2018/11/01 Javascript
puppeteer库入门初探
2019/01/09 Javascript
python每次处理固定个数的字符的方法总结
2013/01/29 Python
详解Python中dict与set的使用
2015/08/10 Python
Python实现网站注册验证码生成类
2017/06/08 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
Python数学形态学实例分析
2019/09/06 Python
python实现按首字母分类查找功能
2019/10/31 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
PyQt5 QDockWidget控件应用详解
2020/08/12 Python
通过代码实例了解Python sys模块
2020/09/14 Python
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
某公司.Net方向面试题
2014/04/24 面试题
职业规划实施方案
2014/06/10 职场文书
大专生求职信
2014/06/29 职场文书
入党积极分子党小组意见
2015/06/02 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
Python合并多张图片成PDF
2021/06/09 Python
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL
python全面解析接口返回数据
2022/02/12 Python