3

次のコードを実行すると、次のようになります。

myDiv.className += condition ? " green" : " red hidden";
console.log("class: " + myDiv.className);

想定どおりにテキストが表示されます。実際、私のものの周りに赤い境界線さえ見えます! ただし、何らかの理由で (私にとっては説明可能な)、コンポーネントは引き続き表示されます。それは私のクリスマスを台無しにすることを意図した神の介入か、疲労のために非常に基本的な何かが欠けているかのどちらかです. それはどれですか？今、神は私を憎んでいますか？:)

.hidden{ display: none; }
.green{ border: 3px solid #00bb00; }
.red{ border: 3px solid #dd0000; }
4

2 に答える 2

3

他のセレクターが.hiddenその特異性においてあなたのクラスを上回っている可能性があります。たとえば、次のコードを考えてみましょう。

​var myDiv = document.querySelector("#foo");
myDiv.className = (false) ? "grn" : "red hidden";

この例では、あなたのように、結果はclassNameofred hidden​​ であり、次の両方が適用されます。

.hidden { display: none }
.red { border: 2px solid red }

しかし、私の要素はまだ表示されています:

ここに画像の説明を入力

この要素のスタイルを調べると、問題が何であるかは明らかです#foo。この場合、.hiddenクラスを無効にしているより具体的な選択があります。

ここに画像の説明を入力

className別のオプションとして、この要素の をさらに変更して、別の場所に同様のスクリプトを作成することもできます。debuggerキーワードを使用してデバッグ ポイントを挿入し、ページ上でコードの実行をステップ実行できます。

于 2012-12-22T15:20:38.880 に答える
1

hidden (非常に一般的な名前)という名前のクラスを実行して削除する別のスクリプトがおそらく存在し、そのコードを書いた人は誰でも、id ではなくクラスで要素を選択すると思います。おそらく、その人は意図せずに削除の範囲が広くなっています。

クラス名の残りを確認してください。最後にスペースがあります。これは、何かがあったが削除されたというかなり強い示唆です。（スペースを削除しないためのコーダーへの余分なマイナス）。

そのプログラマーと話して、彼の操作をより安全に行う方法を説明する必要があります。

この男は私に新しいことを考えました！

于 2012-12-22T15:40:26.060 に答える