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>
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>
- Hint: you need to separate boy into another container in order to change it's color without changing girl's. – loki Commented May 22, 2012 at 3:06
- i just want to change color of a string containing "boy" – toky Commented May 22, 2012 at 3:30
2 Answers
Reset to default 5function turnRed() {
var myPara = document.getElementById("changeText");
myPara.innerHTML = myPara.innerHTML.replace(/\bboy\b(?!<)/g, '<span style="color:blue">boy</span>');
}
I'd remend creating a class in your css then adding it to the element and removing it as necessary. Look into jQuery ( http://www.jquery. ) 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');
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745175607a4615175.html
评论列表（0条）