如何在點擊文本時更改文本的顏色

我想在點擊文本時更改文本的顏色。任何人都可以讓我知道爲什麼這段代碼不起作用嗎？如何在點擊文本時更改文本的顏色

<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>

來源

2013-03-28 manoj

@Derek：是的，我看到了它10秒爲時已晚：d – intelis 2013-03-28 04:07:45

http://jsfiddle.net/eUMDL/ – 2013-03-28 04:20:49

試試這個，它會工作。改變顏色的正確方法是使用：的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>

來源

2013-03-28 04:10:24 sharifahmed

你幾乎擁有它，使用element.style.color

jsFiddle

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"; 
}

正如德里克所指出的，你也可以使用element.setAttribute()，這將覆蓋已經被設定在其他內嵌樣式元素雖然。

jsFiddle

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"); 
}

來源

2013-03-28 04:05:41

附註：如果你真的想通過做「顏色：藍色」來改變顏色，你可以這樣做：http://jsfiddle.net/DerekL/V378R/ – 2013-03-28 04:07:41

'document.getElementById（'web'）'似乎是空的。 – Ovilia 2013-03-28 04:07:43

<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"; 
}

Demo

來源

2013-03-28 04:11:22

它也是一個很好的方式...謝謝 – manoj 2013-03-28 13:33:05

必須設置的顏色是這樣的：

//element.style.CSSProperty = Value; 
    ele.style.color = "blue";

優化版本：

<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"; 
}

演示：http://jsfiddle.net/DerekL/V378R/2/

來源

2013-03-28 04:11:58

試試這個代碼

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"; 
    }

來源

2013-03-28 04:24:45 Krishnaram

如何在點擊文本時更改文本的顏色

回答

相關問題