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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
JavaScript 权威指南(第四版) 读书笔记
Aug 11 Javascript
用jquery与css打造个性化的单选框和复选框
Oct 20 Javascript
Jquery中children与find之间的区别详细解析
Nov 29 Javascript
Javascript实现字数统计
Jul 03 Javascript
jQuery.uploadify文件上传组件实例讲解
Sep 23 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
js 两数组去除重复数值的实例
Dec 06 Javascript
Vue项目打包部署到iis服务器的配置方法
Oct 14 Javascript
angular组件间传值测试的方法详解
May 07 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
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
PHPMailer使用教程(PHPMailer发送邮件实例分析)
2012/12/06 PHP
基于ThinkPHP+uploadify+upload+PHPExcel 无刷新导入数据
2015/09/23 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
PHP sdk实现在线打包代码示例
2020/12/09 PHP
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
Javascript 函数parseInt()转换时出现bug问题
2014/05/20 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
JavaScript设计模式经典之命令模式
2016/02/24 Javascript
js弹出窗口返回值的简单实例
2016/05/28 Javascript
express文件上传中间件Multer详解
2016/10/24 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
2019/09/24 Javascript
js实现烟花特效
2020/03/02 Javascript
Vue循环中多个input绑定指定v-model实例
2020/08/31 Javascript
[00:52]玛尔斯技能全介绍
2019/03/06 DOTA
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
遍历python字典几种方法总结(推荐)
2016/09/11 Python
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
Python模块文件结构代码详解
2018/02/03 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
浅谈python多进程共享变量Value的使用tips
2019/07/16 Python
python TK库简单应用(实时显示子进程输出)
2019/10/29 Python
在python image 中实现安装中文字体
2020/05/16 Python
django中related_name的用法说明
2020/05/20 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
葬礼司仪主持词
2014/03/31 职场文书
《猴子种果树》教学反思
2014/04/26 职场文书
个人课题方案
2014/05/08 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
婚内房产协议书范本
2014/10/02 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书