Question

我正在尝试更改单词的颜色。换句话说，如果我有“男孩女孩男孩女孩”，我希望“男孩”有文字颜色蓝色。

<html>
    <head>
    <title>color</title>
        <script language="javascript">
            function turnRed() {
                var myPara = document.getElementById("changeText");
                if(myPara=="boy"){
                    myPara.style.color = "blue";
                }
            }
        </script>
    </head>
    <body>
        <p id="changeText">boy girl boy girl boy girl boy girl boy girl boy girl</p>
        <p1><button onclick='turnRed()'>Turn Red</button></p1>
    </body>
 </html>

Answer 1

function turnRed() {
  var myPara = document.getElementById("changeText");
  myPara.innerHTML = myPara.innerHTML.replace(/\bboy\b(?!<)/g, '<span style="color:blue">boy</span>');
}

Answer 2

我建议您在css中创建一个类，然后将其添加到元素中并根据需要将其删除。查看jQuery（http://www.jquery.com），因为它可以为您完成javascript的大部分工作，并允许您快速开发大规模应用程序。此外，文档非常好。

<style type="text/css">
    .color1 { color: blue; }
</style>

添加

document.getElementById('changeText').classList.add('color1');

将其删除

document.getElementById('changeText').classList.remove('color1');

JavaScript改变文本颜色

2 个答案: