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 相关文章推荐
jquery中输入验证中一个不错的效果
Aug 21 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
Sep 04 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
浅谈angularJS中的事件
Jul 12 Javascript
Bootstrap导航简单实现代码
Mar 06 Javascript
React Native基础入门之初步使用Flexbox布局
Jul 02 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 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
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
php常用hash加密函数
2014/11/22 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
PHP实现的同步推荐操作API接口案例分析
2016/11/30 PHP
php常用字符串String函数实例总结【转换,替换,计算,截取,加密】
2016/12/07 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
javascript中input中readonly和disabled区别介绍
2012/10/23 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
2017/02/22 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
2017/04/28 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
python win32 简单操作方法
2017/05/25 Python
基于Python3 逗号代码 和 字符图网格(详谈)
2017/06/22 Python
python数据结构之列表和元组的详解
2017/09/23 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
python实现自动发送邮件
2018/06/20 Python
Python中垃圾回收和del语句详解
2018/11/15 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
关于Flask项目无法使用公网IP访问的解决方式
2019/11/19 Python
解锁canvas导出图片跨域的N种姿势小结
2019/01/24 HTML / CSS
Betsey Johnson官网:妖娆可爱的连衣裙及鞋子、手袋和配件
2016/12/30 全球购物
护理学毕业生自荐信
2013/10/02 职场文书
图书室管理制度
2014/01/19 职场文书
少儿节目主持串词
2014/04/02 职场文书
读书伴我成长演讲稿
2014/05/07 职场文书
工程索赔意向书
2014/08/30 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
市场部岗位职责范本
2015/04/15 职场文书
JS继承最简单的理解方式
2021/03/31 Javascript
总结Python使用过程中的bug
2021/06/18 Python
Python序列化模块JSON与Pickle
2022/06/05 Python