0

テキストの色を変更しようとしています。これを行うには、JavaScrip を使用idしてタグの を変更し、異なる CSS ルールが適用されるようにします。div

home.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style-original.css" />
        <meta charset="utf-8" />
        <title>test</title>
        <script type="text/javascript">
        <!--
            function change()
            {
                document.getElementById("part1").className = "part2"
            }
        //-->
        </script>
    </head>
    <body>
        Hello.<br />
        <div id="part1">Test test.</div><br />
        <input type='button' onclick='change()' value='Form Checker' />
    </body>
</html>

スタイルオリジナル.css

#part1
{
    color: #FF0000;
}

#part2
{
    color: #7D26CD;
}

ボタンをクリックしても色は変わりません。何が問題ですか？問題はclassName、変更する必要がある場所を変更していたことidです。これは大きな太った「ド」の瞬間でした。

4

5 に答える 5

2

これを機能させるための最小限の作業は、change()関数を次のように変更することです。

document.getElementById("part1").id = "part2"

ただし、現在のIDを追跡する必要があります。そうしないと、change()関数は要素を再び見つけられなくなります。

于 2013-02-06T23:19:16.533 に答える
1

まず、あなたの望ましい行動が少し不明確です。とは言え、私の解釈は…

私の意見では、ID/クラスの意図に対応していないため、上記のどれも非常に良いオプションではありません。Id は、特定の dom 要素の一意の識別子を意味します。したがって、変更することはお勧めしません。ID ではなく参照クラスにスタイルを変更することをお勧めします。次に、id (part1 と part2) を使用して各要素を取得し、クラスに関連付けられた目的のスタイルを持つ要素にクラス名 (つまり、redText、purpleText) を割り当てることができます。

document.getElementById("part1").className = "redText";

紛らわしい部分は、あなたの命名があなたが達成しようとしていることを示していないことです（part1が何を意味し、なぜそのように命名されているのか）。あなたがやろうとしていることを他の人がフォローできるような名前を付けることは、常に良い考えです。

于 2013-02-06T23:33:56.673 に答える
1

問題があります。JavaScript 関数で change()

この行の代わりに

document.getElementById("part1").className = "part2"

それはこのようなものでなければなりません

document.getElementById("part1").id = "part2"

これは、要素の ID ではなくクラス名を変更しているためです。ここで修正されたコードを見てください: http://jsfiddle.net/bA6SD/

于 2013-02-06T23:17:45.233 に答える
1

ID よりも具体性が低いクラスを変更しています。あなたのサンプルでは、​​クラスの代わりに別のIDを指定しましたが、そのIDを保持することはクラスの追加をオーバーライドしています。

于 2013-02-06T23:21:59.540 に答える
0

本当にIDを変更する必要がありますか？代わりにクラスを変更することをお勧めします (これは、あなたの例で現在行っていることです)。この方法では、現在の ID を追跡する必要がなく、スタイルを変更することも可能です。

ここで実用的な例を見つけてください。

于 2013-02-06T23:36:39.857 に答える