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小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
js原型继承的两种方法对比介绍
Mar 30 Javascript
js和jquery中循环的退出和继续下一个循环
Sep 03 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
jQuery自动添加表单项的方法
Jul 13 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
JS中script标签defer和async属性的区别详解
Aug 12 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
小程序中的箭头函数的具体使用
Jun 19 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
PHP的开合式多级菜单程序
2006/10/09 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
PHP正则之正向预查与反向预查讲解与实例
2020/04/06 PHP
jQuery Select(单选) 模拟插件 V1.3.62 改进版
2010/07/17 Javascript
基于jQuery实现图片的前进与后退功能
2013/04/24 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
2013/09/29 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
jquery利用命名空间移除绑定事件的方法
2015/03/11 Javascript
浅谈jQuery中replace()方法
2015/05/13 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
动态的9*9乘法表效果的实现代码
2016/05/16 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
AngularJS 表达式详细讲解及实例代码
2016/07/26 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
2020/11/02 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
[56:00]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第二场
2018/04/10 DOTA
Python使用matplotlib填充图形指定区域代码示例
2018/01/16 Python
python编写弹球游戏的实现代码
2018/03/12 Python
解决pycharm运行时interpreter为空的问题
2018/10/29 Python
实现Python与STM32通信方式
2019/12/18 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
如何基于线程池提升request模块效率
2020/04/18 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
俄罗斯运动鞋商店:Sneakerhead
2018/05/10 全球购物
新东网科技Java笔试题
2012/07/13 面试题
职业生涯规划书范文
2014/03/10 职场文书
意向协议书范本
2014/04/23 职场文书
户籍证明书标准模板
2014/09/10 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
创业计划书之o2o水果店
2019/08/30 职场文书
python 利用 PIL 将数组值转成图片的实现
2021/04/12 Python