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的执行顺序 之jQuery.html深度分析
Mar 03 Javascript
jQuery源码分析-03构造jQuery对象-工具函数
Nov 14 Javascript
js 获取和设置css3 属性值的实现方法
May 06 Javascript
cookie 最近浏览记录(中文escape转码)具体实现
Jun 08 Javascript
js简单的点击返回顶部效果实现方法
Apr 10 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
什么是JavaScript中的结果值?
Oct 08 Javascript
基于vue的fullpage.js单页滚动插件
Mar 20 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
Vue使用轮询定时发送请求代码
Aug 10 Javascript
JavaScript实现通讯录功能
Dec 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
PHP中对各种加密算法、Hash算法的速度测试对比代码
2014/07/08 PHP
php通过ksort()函数给关联数组按照键排序的方法
2015/03/18 PHP
PHP使用星号隐藏用户名,手机和邮箱的实现方法
2016/09/22 PHP
理清PHP在Linxu下执行时的文件权限方法
2017/06/07 PHP
PHP array_reverse() 函数原理及实例解析
2020/07/14 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
jquery实现加载等待效果示例
2013/09/25 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
JS获取当前脚本文件的绝对路径
2016/03/02 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
2017/05/18 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
[02:34]DOTA2英雄基础教程 幽鬼
2014/01/02 DOTA
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
python使用opencv驱动摄像头的方法
2018/08/03 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
Django数据结果集序列化并展示实现过程
2020/04/22 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
新手学习Python2和Python3中print不同的用法
2020/06/09 Python
python实现canny边缘检测
2020/09/14 Python
关于box-sizing的全面理解
2016/07/28 HTML / CSS
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
德国最大的拼图在线商店:Puzzle.de
2016/12/17 全球购物
医护人员英文求职信范文
2013/11/26 职场文书
人力资源部经理助理岗位职责
2014/03/04 职场文书
道路交通事故赔偿协议书
2014/10/24 职场文书
2014年社区矫正工作总结
2014/11/18 职场文书
工会工作个人总结
2015/03/03 职场文书
学校扫黄打非工作总结
2015/10/15 职场文书
Python爬虫基础初探selenium
2021/05/31 Python