4

HTML、JS、および CSS がどのように連携し、相互に参照するかを理解したいと思います。

HTML は id 参照を介して CSS を参照できることがわかりました。
例：<div id="left-show"></div>

ただし、誰かが次のことを明確にしていただければ幸いです。

  1. 特定の JS 関数を参照するように HTML コードにどのように指示しますか。
  2. JS 関数内で、CSS ID を参照するのは良い習慣ですか?
  3. JS 関数と CSS ID が同じ名前を共有している場合、競合が発生しますか?
4

2 に答える 2

0

あなたの質問は、SA のような簡潔な Q&A サイトで完全な説明をするには、少し遠すぎます。完全に理解するには、本当に多くの資料を読む必要があります。

ただし、開始するための簡単な簡単な回答がいくつかあります

1) JavaScript 関数をトリガーするイベントを介した JavaScript への HTML リンク。function aJavaScriptFunction(){ }これは、ボタンをクリックしたときにJavaScript で宣言された関数を検索する HTML 要素の非常に単純なイベントの例です。これを行うにはさまざまな方法とさまざまな種類のイベントがありますが、ここから始めるのがよいでしょう。

<input id="thebutton" type="button" value="A Button" onclick="aJavaScriptFunction();" />

2) 何をしようとしているのかによって大きく異なりますが、一般に、ID を介して HTML DOM 要素を選択することは、それらを使用して何かを行うためにそれらを選択する効率的な方法です。したがって、これは前の例で使用している JavaScript 関数である可能性があります。

function aJavaScriptFunction()
{
    var aButtonElement = document.getElementById("thebutton"); // <-- It's not a "CSS id" as such, CSS can use the HTML id
    // .... some more javascript that uses aButtonElement like
    aButtonElement.style.borderColor = "red";
}

3) いいえ。JavaScript と CSS は、あなたが考えているように実際には直接重なっているわけではありません。最初は、両方とも HTML を変更するものと考えてください。JavaScript を使用して CSS と同じことを行うこともできますが、一般的には異なるタイミングで行われます。この CSS は以前の JavaScript と競合しませんが、どちらも同様のことを行います。

#thebutton { border-color: blue; }

以下は、私のすべての例をjsFiddleにまとめたもので、そこで遊ぶことができます。

W3 SchoolsやCode Academyのような場所に行くのが一番いいでしょう。

于 2013-05-17T19:53:53.780 に答える