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

仿古書排版文字豎排轉(zhuǎn)換工具：
http://tools.jb51.net/transcoding/shupai

線條字生成工具：
http://tools.jb51.net/transcoding/xiantiaozi

在線鋼筆手寫體/手寫字生成工具：
http://tools.jb51.net/aideddesign/shouxiezi

更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題：《JavaScript切換特效與技巧總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結》、《JavaScript數(shù)據(jù)結構與算法技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: