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给input和textarea设定ie中的focus
May 29 Javascript
改进版通过Json对象实现深复制的方法
Oct 24 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
Mar 06 Javascript
js实现右下角提示框的方法
Feb 03 Javascript
jquery实现横向图片轮播特效代码分享
Nov 19 Javascript
jquery 多个radio的click事件实例
Dec 03 Javascript
Jquery Easyui日历组件Calender使用详解(23)
Dec 18 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
React Router V4使用指南(精讲)
Sep 17 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
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
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
laravel 事件/监听器实例代码
2019/04/12 PHP
jquery点击页面任何区域实现鼠标焦点十字效果
2013/06/21 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
在windows上用nodejs搭建静态文件服务器的简单方法
2016/08/11 NodeJs
canvas 绘制圆形时钟
2017/02/22 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
原生js FileReader对象实现图片上传本地预览效果
2020/03/27 Javascript
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
Vue+Java+Base64实现条码解析的示例
2020/09/23 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
详解python中TCP协议中的粘包问题
2019/03/22 Python
CSS3制作酷炫的三维相册效果
2016/07/01 HTML / CSS
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
CAT鞋美国官网:CAT Footwear
2017/11/27 全球购物
墨尔本最受欢迎的复古风格品牌:Princess Highway
2018/12/21 全球购物
农民工工资支付承诺函
2014/03/31 职场文书
环保倡议书
2014/04/14 职场文书
2014年医务科工作总结
2014/12/18 职场文书
朋友聚会祝酒词
2015/08/10 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript