如何使用CSS/HTML或JavaScript

Question

改變一個單詞的單個字母的顏色這是一個例子，我做什麼我想要實現：

[刪除網站鏈接]

但如果你看看它有很多雜亂的CSS代碼的源代碼。有沒有辦法我可以用Javascript做到這一點？ 感謝先進！

Answer 1

這是一種方法，你只用HTML寫：

<div id="wrap" > 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sollicitudin, felis nec lacinia egestas, metus sem tempor ligula, nec feugiat risus erat a ante. Vivamus a neque eu lorem pharetra vulputate ac id arcu. Nulla facilisi. Quisque porta purus id dolor sollicitudin ut interdum eros bibendum. Nunc dignissim velit vitae leo posuere vel tristique lacus bibendum. Nam suscipit elit magna. Cras odio ipsum, ultricies aliquet lacinia ac, tincidunt ut erat. In venenatis interdum mauris, a lobortis augue mattis vel. Donec sem urna, adipiscing laoreet consectetur nec, sodales id nibh. Integer gravida sem luctus nibh luctus tristique. In tempor adipiscing nisl. Proin consectetur, lorem eget sodales auctor, nulla quam condimentum tortor, sed fringilla massa neque non dolor. 
</div> 

JS：

var elem=document.getElementById("wrap"); 
var l=elem.innerHTML.length; 
var newAns=""; 
for(var a=0;a<l;a++) 
{ 
    newAns+='<span onmouseover="change1(this)" onmouseout="change2(this)" >'+elem.innerHTML.charAt(a)+'</span>'; 
} 
elem.innerHTML=newAns; 

function change1(x) 
{ 
    x.style.color="yellow"; 
} 
function change2(x) 
{ 
    x.style.color="black"; 
} 

小提琴：http://jsfiddle.net/mageek/HKBVJ/

Answer 2

我想這應該幫助，您可以實現懸停功能。

<script type="text/javascript"> 
    var message = "The quick brown fox."; 
    var colors = new Array("#ff0000","#00ff00","#0000ff"); // red, green, blue 
    for (var i = 0; i < message.length; i++) 
     document.write("<span style=\"color:" + colors[(i % colors.length)] + ";\">" + message[i] + "</span>"); 
</script> 

Answer 3

很酷的運動。我會做這樣的使用jquery作爲附配：

編輯：你去那裏與懸停。沒有測試，以防萬一因此檢查語法錯誤：對

<div id="divWithAString">a string</div> 
(...) 
<script type="text/javascript"> 
function CoolFunctionToGenerateHexColours(){ 
    var color ="#", i ; 
    for(i=0;i<6;i++){ 
     color += Math.floor(Math.random()*16).toString(16); 
    } 
    return color; 
} 

var s = $("#divWithAString").text(); 
$("#divWithAString").empty(); 
$(s).each(function(i,e){ 
    var colorHex = CoolFunctionToGenerateHexColours(); 
    var $htmlnode = $('<span >'+e+'</span>'); 
    $htmlNode.hover(function(){ 
     $(this).attr("style", "color: "+colorHex +";"); 
    }, function(){ 
     $(this).attr("style", ""); 
    }); 
    $("#divWithAString").append($htmlNode); 

}); 
</script>