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 相关文章推荐
javascript RadioButtonList获取选中值
Apr 09 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
原生js实现图片层叠轮播切换效果
Feb 02 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
微信小程序实战之轮播图(3)
Apr 17 Javascript
react-router browserHistory刷新页面404问题解决方法
Dec 29 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
Feb 13 jQuery
详解Vue源码学习之callHook钩子函数
Jul 25 Javascript
mui js控制开关状态、修改switch开关的值方法
Sep 03 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
vue-cli3配置favicon.ico和title的流程
Oct 27 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
预告映像公开!第1章续篇剧场版动画《Princess Principal Crown Handler》4月10日上映!
2020/03/06 日漫
解决MySQL中文输出变成问号的问题
2008/06/05 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
利用PHP自动生成印有用户信息的名片
2016/08/01 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
基于jQuery实现模拟页面加载进度条
2013/04/01 Javascript
js禁止页面复制功能禁用页面右键菜单示例代码
2013/08/29 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
JavaScript用Number方法实现string转int
2014/05/13 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
2015/01/28 Javascript
深入探讨javascript中的数据类型
2015/03/04 Javascript
javascript引用类型指针的工作方式
2015/04/13 Javascript
AngularJS仿苹果滑屏删除控件
2016/01/18 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
angularjs使用directive实现分页组件的示例
2017/02/07 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
python数组复制拷贝的实现方法
2015/06/09 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
Python调用Windows API函数编写录音机和音乐播放器功能
2020/01/05 Python
python 的numpy库中的mean()函数用法介绍
2020/03/03 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
Numpy一维线性插值函数的用法
2020/04/22 Python
Python实现Excel自动分组合并单元格
2021/02/22 Python
受希腊女神灵感的晚礼服、鸡尾酒礼服和婚纱:THEIA
2018/04/15 全球购物
linux比较文件内容的命令是什么
2015/09/23 面试题
简历中自我评价范文3则
2013/12/14 职场文书
大学旷课检讨书
2014/01/28 职场文书
工业设计专业自荐书
2014/06/05 职场文书
社区志愿者活动总结
2014/06/26 职场文书
2015年元旦文艺晚会总结(学院)
2014/11/28 职场文书
初中信息技术教学反思
2016/02/16 职场文书
《所见》教学反思
2016/02/23 职场文书
sql查询语句之平均分、最高最低分及排序语句
2022/05/30 MySQL