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 YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
JavaScript 浮点数运算 精度问题
Oct 06 Javascript
javascript 显示当前系统时间代码
Dec 28 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
Sep 06 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 Javascript
VUE Error: getaddrinfo ENOTFOUND localhost
May 03 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
Aug 06 Javascript
JavaScript中CreateTextFile函数
Aug 30 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
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
php开发工具有哪五款
2015/11/09 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
jquery zTree异步加载简单实例分享
2013/02/05 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
Web前端新人笔记之jquery入门心得(新手必看)
2016/05/17 Javascript
js关于getImageData跨域问题的解决方法
2016/10/14 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
jQuery Tree Multiselect使用详解
2017/05/02 jQuery
基于AngularJS实现的工资计算器实例
2017/06/16 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
jQuery+Cookie实现切换皮肤功能【附源码下载】
2018/03/25 jQuery
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
2019/09/20 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
vue3使用vue-count-to组件的实现
2020/12/25 Vue.js
Python学习笔记(二)基础语法
2014/06/06 Python
详解python string类型 bytes类型 bytearray类型
2017/12/16 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
python使用PIL给图片添加文字生成海报示例
2018/08/17 Python
selenium WebDriverWait类等待机制的实现
2020/03/18 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
pytorch 常用函数 max ,eq说明
2020/06/28 Python
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
娇韵诗俄罗斯官方网站:Clarins俄罗斯
2020/10/03 全球购物
党校自我鉴定范文
2013/10/02 职场文书
2014年综治宣传月活动总结
2014/04/28 职场文书
经贸日语专业个人求职信范文
2014/04/29 职场文书
十八大标语口号
2014/10/09 职场文书
2015年小学开学寄语
2015/02/27 职场文书
如何搭建 MySQL 高可用高性能集群
2021/06/21 MySQL
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript