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函数
May 27 Javascript
js 分栏效果实现代码
Aug 29 Javascript
javascript删除字符串最后一个字符
Jan 14 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
javascript中if和switch,==和===详解
Jul 30 Javascript
简单实现jQuery进度条轮播实例代码
Jun 20 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
微信小程序 form组件详解
Oct 25 Javascript
jQuery弹出层插件popShow(改进版)用法示例
Jan 23 Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
jQuery实现可编辑的表格
Dec 11 jQuery
Javascript call及apply应用场景及实例
Aug 26 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
oracle资料库函式库
2006/10/09 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
PHP实现负载均衡的加权轮询方法分析
2018/08/22 PHP
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
js禁止页面刷新禁止用F5键刷新禁止右键的示例代码
2013/09/23 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
jquery 淡入淡出效果的简单实现
2014/02/07 Javascript
JavaScript新窗口与子窗口传值详解
2014/02/11 Javascript
js构造函数、索引数组和属性的实现方式和使用
2014/11/16 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
jQuery实现非常实用漂亮的select下拉菜单选择效果
2015/11/06 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
2016/01/18 Javascript
js获取元素的标签名实现方法
2016/10/08 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
vue 如何添加全局函数或全局变量以及单页面的title设置总结
2017/06/01 Javascript
vue.js移动端app实战1:初始配置详解
2017/07/24 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
理解 JavaScript EventEmitter
2018/03/29 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
js滚轮事件 js自定义滚动条的实现
2020/01/18 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
2020/12/24 Javascript
[01:04:08]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第一场 12.16
2020/12/18 DOTA
python BeautifulSoup使用方法详解
2013/11/21 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
Python FtpLib模块应用操作详解
2019/12/12 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
统计员岗位职责
2013/11/14 职场文书
四川成都导游欢迎词
2014/01/18 职场文书
小学教师办公室制度
2014/02/03 职场文书
长城的导游词
2015/01/30 职场文书
安全教育培训制度
2015/08/06 职场文书
工作建议书范文
2019/07/08 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python