2013-03-28 4 views
0

Я хочу изменить цвет текста при нажатии на него. Может кто-нибудь сообщить мне, почему этот код не работает?Как изменить цвет текста при его нажатии

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

@Derek: да я видел, что это 10s слишком поздно: D – intelis

+0

http://jsfiddle.net/eUMDL/ –

ответ

1

Попробуйте это, он будет работать. Правильный способ изменить цвет с помощью: 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> 
1

Вы почти имели, используйте 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"); 
} 
+0

Side Примечание: Если вы действительно хотите чтобы изменить цвет, выполнив «цвет: синий», вы можете сделать это: http://jsfiddle.net/DerekL/V378R/ –

+0

'document.getElementById ('web')' кажется нулевым. – Ovilia

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

+0

его также хороший способ ... спасибо – manoj

0

Вы должны установить цвет экрана таким образом:

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

0

попробуйте этот код

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"; 
    } 
Смежные вопросы