如何在单击时更改文本的颜色
[英]How to change color of text when it is clicked
问题描述
I want to change the color of text when clicking on it. 
我想在点击时更改文字的颜色。 Can anybody let me know why this code isnt working? 任何人都可以告诉我为什么这段代码不起作用？
<html>
<body>
<center>
<div id="web" style="color:black" onclick="changeformat(this.id)"> Web </div>
<div id="img" style="color:blue" onclick="changeformat(this.id)"> Images </div>
<div id="news" style="color:blue" onclick="changeformat(this.id)"> News </div>
</center>
</body>
</html>
<script>
function changeformat(type)
{
document.getElementById('web').style = "color:blue;";
document.getElementById('img').style = "color:blue";
document.getElementById('news').style = "color:blue";
document.getElementById(type).style = "color:black";
}
</script>
5 个解决方案
解决方案1
1 2013-03-28 04:05:41
You almost had it, use element.style.color 你几乎拥有它，使用element.style.color
function changeformat(type) {
document.getElementById('web').style.color = "blue;";
document.getElementById('img').style.color = "blue";
document.getElementById('news').style.color = "blue";
document.getElementById(type).style.color = "black";
}
As Derek points out you can also use element.setAttribute() , this will override other inline styles that are already set on the element though. 正如Derek指出的那样你也可以使用element.setAttribute() ，这将覆盖已经在元素上设置的其他内联样式。
function changeformat(type) {
document.getElementById('web').setAttribute("style", "color:blue;");
document.getElementById('img').setAttribute("style", "color:blue");
document.getElementById('news').setAttribute("style", "color:blue");
document.getElementById(type).setAttribute("style", "color:black");
}
解决方案2
1 已采纳 2013-03-28 04:10:24
Try This, It will work. 试试这个，它会起作用。 The correct way to change the color is using: document.getElementById(id).style.color 更改颜色的正确方法是使用：document.getElementById（id）.style.color
<html>
<body>
<center>
<div id="web" style="color:black" onclick="changeformat(this.id)"> Web </div>
<div id="img" style="color:blue" onclick="changeformat(this.id)"> Images </div>
<div id="news" style="color:blue" onclick="changeformat(this.id)"> News </div>
</center>
</body>
</html>
<script>
function changeformat(type)
{
document.getElementById('web').style.color = "blue";
document.getElementById('img').style.color = "blue";
document.getElementById('news').style.color = "blue";
document.getElementById(type).style.color = "black";
}
</script>
解决方案3
0 2013-03-28 04:11:22
<div id="web" style="color:black" onclick="changeformat(this)"> Web </div>
<div id="img" style="color:blue" onclick="changeformat(this)"> Images </div>
<div id="news" style="color:blue" onclick="changeformat(this)"> News </div>
function changeformat(element) {
var elements = ['web', 'img', 'news'];
for( var i = 0, length = elements.length; i < length; i++ ) {
document.getElementById( elements[i] ).style.color = 'blue';
}
element.style.color = "black";
}
解决方案4
0 2013-03-28 04:11:58
You have to set the color this way: 你必须这样设置颜色：
//element.style.CSSProperty = Value;
ele.style.color = "blue";
An optimized version: 优化版本：
<div id="web" style="color:black" onclick="changeformat(event)"> Web </div>
function changeformat(e){
var eles = document.querySelectorAll("div");
for(var i = 0 ; i < eles.length; i++){
eles[i].style.color = "blue";
}
e.target.style.color = "black";
}
Demo: http://jsfiddle.net/DerekL/V378R/2/ 演示： http ： //jsfiddle.net/DerekL/V378R/2/
解决方案5
0 2013-03-28 04:24:45
try this code 试试这段代码
function changeformat(type)
{
document.getElementById('web').style.color = 'green';
document.getElementById('img').style.color = 'pink';
document.getElementById('news').style.color = 'red';
document.getElementById(type).style.color = "black";
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.