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

5 に答える 5

1

あなたはほとんどそれを持っていました、使用してくださいelement.style.color

jsフィドル

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

Derek が指摘しているように、 も使用できますがelement.setAttribute()、これは要素に既に設定されている他のインライン スタイルをオーバーライドします。

jsフィドル

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-28T04:05:41.623 に答える
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>
于 2013-03-28T04:10:24.423 に答える
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/

于 2013-03-28T04:11:58.693 に答える
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";
}

デモ

于 2013-03-28T04:11:22.833 に答える
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";
    }
于 2013-03-28T04:24:45.817 に答える