javascript - JavaScript 改变文本颜色

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>

score 5 · Accepted Answer

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

score 1 · Accepted Answer

我建议在您的 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 - JavaScript 改变文本颜色

2 回答 2

Related

Reference