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 相关文章推荐
图片动画横条广告带上下滚动的JS代码
Oct 25 Javascript
jquery和ajax的关系详细介绍
Nov 29 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
javascript中的Function.prototye.bind
Jun 25 Javascript
JavaScript如何禁止Backspace键
Dec 02 Javascript
基于javascript实现文字无缝滚动效果
Mar 22 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
mpvue实现小程序签到金币掉落动画(api实现)
Oct 17 Javascript
vue 使用外部JS与调用原生API操作示例
Dec 02 Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 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
为什么夜间收到的中波电台比白天多
2021/03/01 无线电
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
php组合排序简单实现方法
2016/10/15 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
php命令行模式代码实例详解
2021/02/26 PHP
js对象的比较
2011/02/26 Javascript
Javascript中的delete操作符详细介绍
2014/06/06 Javascript
Nodejs关于gzip/deflate压缩详解
2015/03/04 NodeJs
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
JS实现的自动打字效果示例
2017/03/10 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
2017/03/30 Javascript
javascript 通过键名获取键盘的keyCode方法
2017/12/31 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
浅谈Vue.use到底是什么鬼
2020/01/21 Javascript
video.js添加自定义组件的方法
2020/12/09 Javascript
python检测远程服务器tcp端口的方法
2015/03/14 Python
Python获取央视节目单的实现代码
2015/07/25 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
python 含子图的gif生成时内存溢出的方法
2019/07/07 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
selenium切换标签页解决get超时问题的完整代码
2020/08/30 Python
分享一个python的aes加密代码
2020/12/22 Python
HTML5 在canvas中绘制矩形附效果图
2014/06/23 HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
2019/10/08 HTML / CSS
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
英国最受信任的在线眼镜商之一:Fashion Eyewear
2019/10/31 全球购物
Linux开机引导的步骤是什么
2015/10/19 面试题
商务英语专业应届毕业生求职信
2013/10/28 职场文书
电力公司个人求职信范文
2014/02/04 职场文书
《九色鹿》教学反思
2014/02/27 职场文书
教师党员一句话承诺
2014/03/28 职场文书
毕业生就业推荐表导师评语
2014/12/31 职场文书
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android