💖 👸🏻 🦐 JavaScriptプログラマーを支援するCSS 🏩 🏴󠁧󠁢󠁳󠁣󠁴󠁿 👿

JavaScriptを使用すると、 htmlページ内のノードのすべての特性を簡単に操作できます。ただし、原則として、JavaScriptを使用してノードの特性を「手動で」変更するには時間がかかりすぎるため、プログラマはHTMLとCSSの複雑さを知る必要があります。

CSS機能を使用すると、このタスクのほとんどをレイアウトデザイナーに移行でき、プログラマはこれらのノードの状態を操作するだけで済みます。問題を解決するためのこのアプローチにより、「落とし穴」のほとんどを回避し、多くの問題を特に困難なく解決できます。

最も簡単な例は、JavaScriptを使用してページ上のブロックを非表示/表示することです。通常、これは次のように行われます。

 <スクリプト>
関数の非表示（nodeId）
 {
     var node = document.getElementById（nodeId）;
     if（ノード）
     {
         node.style.display = 'none';
     } 
 }
 
関数show（nodeId）
 {
     var node = document.getElementById（nodeId）;
     if（ノード）
     {
         node.style.display = 'block';
     } 
 }
 </ script>
 <input type = "button" value = "Hide" onclick = "hide（ 'test'）" />
 <input type = "button" value = "Show" onclick = "show（ 'test'）" />
 <div id = "test">例のテキスト。 たとえばテキスト。</ div>

何が起こったのか見てみましょう。

ここではすべてが正常に機能し、不満はありません。別の例を挙げます。

  <p> Soap Mom <span id = "lie">フレーム。 息子はパパを愛しています</ span> </ p>
  <入力タイプ= "ボタン"値= "真実全体を表示" />
  <入力タイプ= "ボタン"値= "元の状態に戻る" />

「Show the whole truth」ボタンをクリックして、スパン＃lieノード（識別子lieを持つスパンタグ）を非表示にする必要があるとします。「戻る」ボタンをクリックすると、このノードが再び表示されます。同じ機能を使用してこのタスクを実装してみましょう。

 <スクリプト>
関数の非表示（nodeId）
 {
     var node = document.getElementById（nodeId）;
     if（ノード）
     {
         node.style.display = 'none';
     } 
 }

関数show（nodeId）
 {
     var node = document.getElementById（nodeId）;
     if（ノード）
     {
         node.style.display = 'block';
     } 
 }
 </ script>
 <p> Soap Mom <span id = "lie">フレーム。 息子はパパを愛しています</ span> </ p>
 <input type = "button" value = "真実をすべて表示" onclick = "hide（ 'lie'）" />
 <input type = "button" value = "return as it was" onclick = "show（ 'lie'）" />

実行中の作業の結果を確認します。

この例からわかるように、「Show the whole truth」ボタンは、希望どおりにタスクを実行します。しかし、「Return as it is」ボタンをクリックすると、テキストは再び表示されますが、いくつかの歪みがあります-完全に不要な改行が表示されます。

その理由は何ですか？少しのCSSを知っている人は、私がどこへ行くのかを長い間理解しています。問題は、ノードの表示プロパティがブロックに設定されている場合、ノードはブロック要素になり、デフォルトで幅の100％を占めることです。この場合、ブロックではなくインラインで値を設定する必要があります。そして、なぜプログラマーはそのような微妙な点を知る必要があるのでしょうか？この場合、必要ありません。

他の方法も可能です-たとえば、中間変数に元の値を追加して、非表示機能コードを変更します。しかし、より良い方法があります。

CSS機能を私たちの方向に向けましょう。必要なプロパティを設定する特別な非表示のCSSクラスを作成します。これで、このクラスを目的のノードに割り当てるだけになり、画面から消えます。このクラスを削除すると、彼は問題なく勤務に戻ります。

 <スタイル>
 .hidden {display：none;}
 </ style>
 <スクリプト>
関数の非表示（nodeId）
 {
     var node = document.getElementById（nodeId）;
     if（ノード）
     {
         node.className = 'hidden';
     } 
 }
 
関数show（nodeId）
 {
     var node = document.getElementById（nodeId）;
     if（ノード）
     {
         node.className = '';
     } 
 }
 </ script>
 <p> Soap Mom <span id = "lie">フレーム。 息子はパパを愛しています</ span> </ p>
 <input type = "button" value = "真実をすべて表示" onclick = "hide（ 'lie'）" />
 <input type = "button" value = "return as it was" onclick = "show（ 'lie'）" />

これで、例は正常に機能します。

ただし、もう1つの問題が残っています。ノードに既に何らかのクラスがある場合は考慮されません。この問題を自分で解決してください。

一般的な場合、このアプローチは次のように説明できます。ノードの特性ではなく、状態を操作するよう努力する必要があります。ノードでのこのクラスまたはそのクラスの存在はまさにその状態です。ノードが複数のクラスを結合できる場合、かなり複雑な操作を単純な状態切り替えスキームに減らすことさえできます。次に、レイアウトデザイナーに依頼して、スタイルシートでこれらの状態の特別なルールを準備します。

オリジナル記事

JavaScriptプログラマーを支援するCSS

More articles: