JavaScript changing text color

Question

I am trying to change the color of a word. In other words, if I have "boy girl boy girl" I want "boy" to have text color blue.

<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

I'd recommend creating a class in your css then adding it to the element and removing it as necessary. Look into jQuery ( http://www.jquery.com ) as it does most of the grunt work of javascript for you and allows you to develop large scale applications fast. Plus the documentation is quite good.

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

to add it

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

to remove it

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

JavaScript changing text color

Question

2 answers

solution1
5 ACCPTED 2012-05-22 03:03:25

solution2
1

JavaScript changing text color

Question

2 answers

solution1 5 ACCPTED 2012-05-22 03:03:25

solution2 1

solution1
5 ACCPTED 2012-05-22 03:03:25

solution2
1