1

私の例では、ID「foo1Closed」の div があります。「foo1Closed」をクリックすると、div 内で多数の要素を変更したい (高さ、幅、色、可視性など)。

これを実現する 1 つの方法は、.css ファイルの各要素に 2 つのスタイルをコーディングすることです。たとえば、「foo1Closed」用のスタイルと「foo1Opened」用のスタイルがあります。お気に入り：

#foo1Closed {
   visibility:hidden;
}
#foo1Opened {
    visibility:visible;
}

次に、次のように JavaScript 関数を使用してこれらの ID を変更します。

document.getElementById("foo1Opened").id = "foo1Closed";

私はこのアプローチの潜在的な欠点を認識していないので、これがこの対話性を達成するための「大丈夫な」方法であるかどうか、または代わりに JavaScript を介してスタイルを直接変更する必要があるかどうか、誰かが答えてくれることを期待していました。

document.getElementById("foo1Opened").style.visibility = "hidden";

明らかに、1 つのソリューションにはより多くの CSS コードが含まれ、もう 1 つのソリューションにはより多くの JavaScript コードが含まれます。私が気付いていないのは、どちらがより効率的かということです (パフォーマンスおよび/またはプロジェクトのモデリングに関する限り)。

言い換えた質問: ID は特定のオブジェクトを識別するために使用されるため (つまり、通常は変更しないでください)、ID を編集せずに、また JavaScript を使用してすべての要素を手動で変更することに頼らずに、これを達成する別の方法はありますか?

4

8 に答える 8

5

私の個人的な好みは、ID を変更する代わりに、jQuery を使用してクラスを追加または削除することです。後者を行うことは、より多くの効果を達成したいときに、問題を解決することを求めているだけです.

次のようなもの：

$("#foo1").removeClass("class1").addClass("class2");

または、条件付きで達成したい場合。

于 2013-07-08T20:24:46.933 に答える
1

「id」属性は変更しないでください。

代わりに「class」属性を使用してください。

例えば：

<style type='text/css'>
    div.closed {
        display:none;
    }
    div.opened {
        display:inline;
    }

</style>

<div id="foo1" class="opened">...</div>

JavaScript 関数では、次を使用します。

    var foo1 = document.getElementById("foo1");

    foo1.className="closed";


次の方法でクラス属性を変更しないようにしてください:

document.getElementById("foo1").setAttribute("class","closed");

DOM 要素のclassNameプロパティを使用する必要があります

于 2013-07-08T20:41:45.467 に答える
-1

IDではなくクラスを使用する必要があります

于 2013-07-08T20:25:05.150 に答える