脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js设置文字颜色

js设置文字颜色的方法示例

 更新时间：2016年12月30日 12:03:27   作者：漫步  
这篇文章主要介绍了js设置文字颜色的方法,涉及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实现打地鼠小游戏的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • 定单管理上 JS表格排序

    定单管理上 JS表格排序

    定单管理上 JS表格排序...
    2006-10-10
  • 基于bootstrop常用类总结(推荐)

    基于bootstrop常用类总结(推荐)

    下面小编就为大家带来一篇基于bootstrop常用类总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • uniapp 获取页面来源及注意事项

    uniapp 获取页面来源及注意事项

    这篇文章主要介绍了uniapp 获取页面来源及注意事项,获取当前页面栈的实例,以数组形式按栈的顺序给出,数组中的元素为页面实例,第一个元素为首页,最后一个元素为当前页面,感兴趣的朋友参考本文实例代码
    2024-03-03
  • JavaScript实现捕获鼠标坐标

    JavaScript实现捕获鼠标坐标

    这篇文章主要为大家详细介绍了JavaScript实现捕获鼠标坐标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-04-04
  • JS实现文字掉落效果的方法

    JS实现文字掉落效果的方法

    这篇文章主要介绍了JS实现文字掉落效果的方法,可实现文字往下掉落最终排序正常显示的效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-05-05
  • （兼容ff/ie）td点击背景变色特效

    （兼容ff/ie）td点击背景变色特效

    （兼容ff/ie）td点击背景变色特效...
    2007-08-08
  • JavaScript 自定义事件之我见

    JavaScript 自定义事件之我见

    事件就是用户和浏览器交互的一种途径,在本例中我们的代码逻辑一般就是收集用户填写信息，验证信息合法性，利用AJAX与服务器交互,需要的朋友可以参考下
    2017-09-09
  • fullpage.js全屏滚动插件使用实例

    fullpage.js全屏滚动插件使用实例

    这篇文章主要介绍了fullpage.js全屏滚动插件使用,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • js使用for循环查询数组中是否存在某个值

    js使用for循环查询数组中是否存在某个值

    IE8不支持indexOf，因此写一个for循环来判断是否存在，下面是代码，经测试还不错
    2014-08-08

最新评论