将单词更改为不同的颜色

Question

所以我有这个代码：

<script type="text/javascript">
    document.getElementById("randoBtn").addEventListener("click", clickHandler);

function clickHandler(event) {
    event.preventDefault();
    document.getElementById("message1").innerHTML = "Try writing a " + selectedWord() + " and";
    var selectWord  
    document.getElementById("message2").innerHTML = selectedWord() + " story";
}

function selectedWord(){
    var myarray = new Array("Action", "Adventure", "Apocalyptic", "Comedy", "Detective", "Disaster", "Drama", "Epic", "Erotica", "Fable", "Fairy Tale", "Fantasy", "Fiction", "Folk Tale", "Ghost", "Historical", "Horror", "Humor", "Military", "Mystery", "Mythology", "Narrative", "Parallel Universe", "Paranormal", "Parody", "Poetry", "Post-Apocalyptic", "Pulp Fiction", "Quest", "Realistic Fiction", "Revenge", "Romantic", "Science Fiction", "Short Story", "Spy", "Supernatural", "Tall Tale", "Thriller", "Time Travel", "Undersea", "Western");

    return myarray[Math.round(Math.random() * (myarray.length - 1))];
}   
</script>

是否可以将 selectWord() 变量更改为不同的颜色？我只是想让它在文本的其余部分中脱颖而出。提前致谢！

Answer 1

在这里，我用 <span> 标签包裹了 selectedWord return，因为它跨越了 class 名称并设置了 class 名称的样式。

function clickHandler(event) {
    event.preventDefault();
    document.getElementById("message1").innerHTML = "Try writing a <span class=\"Words\">" + selectedWord() + "</span> and";
    var selectWord  
    document.getElementById("message2").innerHTML = "<span class=\"Words\">"+selectedWord() + "</span> story";
}
function selectedWord(){
    var myarray = new Array("Action", "Adventure", "Apocalyptic", "Comedy", "Detective", "Disaster", "Drama", "Epic", "Erotica", "Fable", "Fairy Tale", "Fantasy", "Fiction", "Folk Tale", "Ghost", "Historical", "Horror", "Humor", "Military", "Mystery", "Mythology", "Narrative", "Parallel Universe", "Paranormal", "Parody", "Poetry", "Post-Apocalyptic", "Pulp Fiction", "Quest", "Realistic Fiction", "Revenge", "Romantic", "Science Fiction", "Short Story", "Spy", "Supernatural", "Tall Tale", "Thriller", "Time Travel", "Undersea", "Western");

    return myarray[Math.round(Math.random() * (myarray.length - 1))];
}  
window.onload=function(){document.getElementById("randoBtn").addEventListener("click", clickHandler);}

.Words{color:red;font-weight:bold;}

    <button id="randoBtn">Go!</button>
<div id="message1"></div>
<div id="message2"></div>

希望对您有所帮助。编码愉快！

将单词更改为不同的颜色

Change a Word to a Different Color

javascript

text

colors