js设置文字颜色的方法示例
本文实例讲述了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>
PS：这里再提供几款文字特效工具供大家参考：
在线特效文字/彩色文字生成工具：
http://tools.jb51.net/aideddesign/colortext
在线生成字体CSS样式工具：
http://tools.jb51.net/code/csscreate
仿古书排版文字竖排转换工具：
http://tools.jb51.net/transcoding/shupai
线条字生成工具：
http://tools.jb51.net/transcoding/xiantiaozi
在线钢笔手写体/手写字生成工具：
http://tools.jb51.net/aideddesign/shouxiezi
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
JS实现单行文字不间断向上滚动的方法
本文实例讲述了JS实现单行文字不间断向上滚动的方法.分享给大家供大家参考.具体分析如下: 前几天帮一个朋友写了一个单行文字不间断向上滚动的JS效果,现在分享给需要的weber.先看HTML和CSS代码: CSS: 复制代码 代码如下: .wrap{padding:10px;border:1px #ccc solid; width:500px;margin:20px auto;} .roll-wrap{height:130px;overflow:hidden;} HTML: 复制代码 代码如下:
-
RGB颜色值转HTML十六进制(HEX)代码的JS函数
复制代码 代码如下: //转到固定长度的十六进制字符串,不够则补0 function zero_fill_hex(num, digits) { var s = num.toString(16); while (s.length < digits) s = "0" + s; return s; } //妈的,怎么都没搜到怎么用javascript找出一个背景色的数值,只好自己解析 function rgb2hex(rgb) { //nnd, Firefox / IE not the
-
JS实现让访问者自助选择网页文字颜色的方法
本文实例讲述了JS实现让访问者自助选择网页文字颜色的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>JS实现让访问者自助选择网页的文字颜色</title> <script language="javascript"> <!-- function chColor(c){ document.body.style.color = c; } //--> </script>
-
js点击列表文字对应该行显示背景颜色的实现代码
本文实例讲述了js点击列表文字,实现该行文字显示背景颜色的方法.分享给大家供大家参考.具体如下: JS控制li,鼠标点击时class自动加上,给列表文字产生自己喜欢的背景色的网页特效. 运行效果图如下: <style type="text/css"> li{cursor:pointer;} .cur{background:red;} </style> <script type="text/javascript"> windo
-
Js 打字效果 逐一出现的文字
第一种:打印多个文字 逐个出现的文字 var layers =document.layers,style=document.all,both=layers||style,idme=908601; if(layers){layerRef='document.layers';styleRef ='';}if(style){layerRef='document.all';styleRef = '.style';} function writeOnText(obj,str){ if(layers)wit
-
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
js+html5 canvas实现的涂鸦画板特效,可调画笔颜色|粗细|橡皮,可以保存涂鸦效果为图片编码,非常适合学习html5的canvas,必须支持html5的浏览器才能看到效果. 复制代码 代码如下: <!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascri
-
JS Range HTML文档/文字内容选中、库及应用介绍
一.前面的些话 本文的内容基本上是基于"区域范围对象(Range objects)"这个概念来说的.这个玩意,可以让你选择HTML文档的任意部分,并可以拿这些选择的信息做你想做的事情.其中,最常见的Range是用户用鼠标选择的内容(user selection). 本文有不少篇幅就是讲如何将用户的这种选择转换为W3C Range或Microsoft Text Range对象. 二.什么是Range? 所谓"Range",是指HTML文档中任意一段内容.一个Range
-
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
本文实例讲述了JS实现文字链接感应鼠标淡入淡出改变颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>JS实现文字链接感应鼠标淡入淡出改变颜色</TITLE> </HEAD> <BODY> <script l
-
浅析js 文字滚动效果
这种效果在今后的web发展中是不是常用或者是否依然被设计师们所青睐,从技术层面看并不是最重要的,了解它的实现原理,对自身前端技术的提高,会有很大的帮助,世间万物,万变不离其宗,掌握了它的运行规律,你才不会被其花花外表所迷惑,甚至你可以在掌握其规律的前提下,运行相关技术,创造出新的效果来.下面看看它的实现过程: 1.html 复制代码 代码如下: <div class="box" id="marqueebox0"> <ul> <li st
-
JS实现改变HTML上文字颜色和内容的方法
本文实例讲述了JS实现改变HTML上文字颜色和内容的方法.分享给大家供大家参考,具体如下: 1. JavaScript <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Day 1 </TITLE> <META NAME="Generator" CONTENT="EditP
-
javascript自动改变文字大小和颜色的效果的小例子
复制代码 代码如下: <body bgcolor="#000000"> <div id="text" style="font-size:20px;">你好,这是一段改变文字大小和颜色的javascript代码</div> <script type="text/javascript"> var size = 20; var falg = 1; function col
-
神奇！js+CSS+DIV实现文字颜色渐变效果
本文实例为大家分享了DIV+CSS+JS实现的文字颜色渐变效果,供大家参考,具体内容如下 下面是 CSS 部分代码: <!--CSS代码开始--> body{ font:12px/1.5 Microsoft Yahei; } h3{ padding:10px; margin:0; background-color:#999; color:#fff; font:16px/1.5 Microsoft Yahei; text-align:center; } .box{ position:relati