いくつかのビデオを前に、要素を選択して操作するという概念を紹介しました。
そこで、H1またはすべての画像タグを選択してから、それらをクリックすると、色を変更したり、アニメートしたり、何かを行うことができます。
これまでのところ、私たちは半分とこのビデオを選択するだけをカバーしました。
要素を選択すると、要素を操作するためのさまざまな方法のいくつかを紹介します。
ここで私が話したいと思う4つの主要なことがあります。
最初の要素スタイルはどのように変更するかです。
どのように青くするか、隠すか。
フォントサイズを変更します。
次に、javascriptを使ってクラスを追加したり削除したりして、タグの内容を変更する方法について説明します。
では、H-1タグの内部のテキストをどのように変更するのですか？
最後に属性を変更します。
では、イメージタグのソースやAAタグのリファレンスをどのように変更するのですか？
まず、スタイルプロパティについて説明します。
したがって、DOMが構築され、個々のノードが作成されるか、オブジェクトがすべての要素に対して作成されると、スタイルと呼ばれるプロパティがあり、スタイルプロパティは、設定可能なCSSAプロパティごとに膨大な数のプロパティです。
だから我々はスタイルと要素を別々に行くjavascriptを書くことができます。
そこでここでは、Idハイライトで要素を選択していますので、タグと呼ばれる変数に保存してから操作してください。
そして、私がしていることは、私が設定していることです。
青色のタグドットスタイルにドットスタイルのドットカラーを割り当てるドットの境界線は、10ピクセルの赤色になります。
右辺は文字列でなければならないことに注意することが重要です。
したがって、C Sでは、青または約70 P xの周りに引用符を入れる必要はありません。
これはC Ssではありません。
これはJavaScriptです。
だから私たちはまだ通常のjavascriptのルールに従わなければなりません。
だから私は、これらのプロパティのいくつかを示すために使用するシンプルなWebページを設定しました。
したがって、このWebページは、その段落の代わりに段落を1つだけH-1段落させたものです。
強いタグがあり、2つの愛らしいコルギのミックスの2つのイメージがあります。
私がやるべきことは、領事に行き、何かを選ぶことから始める必要があり、私はこのH-1の色と境界を変更するつもりです。
だから私はそれを選択する必要があり、クエリセレクタH-1を使う新しい文書でこれを行うには複数の方法があります。
そして、私はあなたに巨大なオブジェクトトンとたくさんのプロパティであるH-1スタイルを見せます。
だから私はH-1スタイルの暗い色のようなものの1つを変えて、それを黄色にしてみるつもりです。
そしてそれはすぐに黄色に変わったのを見ることができました。
ボーダーH-1と同じことは、ボーダーが等しいというスタイルは、5ピクセルのソリッドピンクをします。
そしてそこに行く。
もちろん、ピンクのボーダーで黄色にしたい場合はもちろんです。
ページがロードされてから、それを行うためにjavascriptを使用する理由はありません。
CSSAファイルに入れておくと、ユーザーがページに5秒間いるときにイエローに変わり、ピンクの境界線がある場合や、ユーザーがページの特定の部分にスクロールしたときに表示されるようにしたい場合はjavascriptを使用しますページまたはユーザーが何かをクリックした。
物事をインタラクティブにすることがすべてです。すぐにそれを行う方法がわかります。
スタイルプロパティを使うことについての素晴らしい点は、ここでやっているように個々の要素にたくさんのファイルを操作して、この1つのタグで5つの異なるプロパティを変更することが間違いなく良い方法だということです。
そして、より良い方法があるという理由がいくつかあります。
最初の1つは、これは非常に乾燥したコードではないということです。
繰り返しタグ付けされたスタイルのタグ付きスタイルがたくさんあります。
もっと重要なのは、懸念の分離と呼ばれるこのコンセプトがあることです。
したがって、懸念の分離は、私たちのH M L R C Sがjavascriptではないというこのコンセプトです。
それぞれが自分の小さなドメインに責任があり、私たちはそれを望んでいません。
私たちはそれらの間に多くのクロスオーバーを望んでいません。
したがって、この図では、各チーム間にクロスオーバーがあり、構造とJavaScriptの動作が交錯し、評価がプレゼンテーションであることがわかります。
Htmlのjavascriptと少しオーバーラップしていますが、実際にスタイル属性を使用するすべての要素に個別にスタイルを記述しなければならなかったのはC
Ssが来る前のことでした。
その場合、スタイリングは実際に構造体に織り込まれていました.C Sでは、これを分離しました。
HMOは純粋な構造であり、その成功は純粋なスタイルです。
だから、javascriptには、ページの振る舞いを制御しなければならないということがあります。時には、JavaScriptのスタイルを変更することを意味します。
私たちができることは、CSSAファイルの内部でそれらを有効または無効にすることです。
したがって、実際に一般的なパターンの1つは、ハイライトのようなCSSAクラスを定義することです。ハイライトクラスは、変化している5つまたは6つの異なるプロパティを持ちます。
そして、javascriptで要素を選択し、そのハイライトクラスを与えることができます。
だから1行のJavascriptでは、5つの異なるプロパティを変更するクラスを追加できます。
これがJavascriptでどのように実装されるかを見てみましょう。
だから、タグを選択してスタイルを変えるのではなく、色を青にして境界線を上にして、10ピクセルの赤色にすることができます。代わりに、そのクラスのクラスを見つけることができます。
通常、それはクラスが何をすることになっているかを反映するために、いくらか意義があることを望みます。
それは強調表示されているか、それとも正解かです。
試しにクラスを適用している理由が何であれ、高い得点が得られます。
だから、これは良い名前ではありませんが、いくつかのクラスは、いくつかのクラスは、青と境界線10ピクセルの赤色になるように色を変更しています。
次に、自分のタグを選択してから、ドットクラスリストのドットをタグ付けすることで、いくつかのクラスを追加すると、これらのスタイルのすべてでいくつかのクラスと呼ばれる新しいクラスが強調表示されます。
クラスリストでできることがいくつかあります。
だから、この例では私が既に見た3つのメソッドaddを示します。これはクラス名を取るclass
removeをどのように追加することができ、そのクラス名をクラスリストから削除して、クラスリストトグルを非常に便利にします。
クラス名が必要です。
そして、与えられた要素が既にそのクラスを持っているなら、要素がそのクラスを持っていなければそれを削除し、次にそれを有効にします。
非常に便利です。
私たちはいつもそれを後で使用します。
それで私がここに私の例に戻る前にあなたにそれを実証させてください。
私は実際に新しいクラスを定義しようとしています。
したがって、新しいスタイルシートを作成し、リンクを使用するのではなく、ちょうど時間のためにスタイルタグを使用するつもりです。
だから私はあなたがそれを大きなと呼ぶクラスを定義しようと思います。
そして私がしようとしていることは、フォントサイズを100ピクセルに変更し、色をオレンジ色に変更することです。
最後に、5ピクセルの赤の境界線を付けましょう。
だから私はそれを残すでしょう。
私のページをリフレッシュしても、コースは変わりませんが、私がしたいときは、そのクラスを何かに適用することです。
だから、私はこの段落にこれまでにそれを選択する必要があることをするための大きなクラスを持たせるつもりです。
段落は、クエリセレクタの段落に対応するドキュメントに相当します。
OK。
クラスリストを見てみましょう。空であることがわかります。
この段落にまだ割り当てられているクラスはありません。
ですから、私がする必要があるのは、P-Dubクラスリストのドットを追加するだけです。クラスを大きく追加したいのです。
そしてそこに行く。
したがって、私のスタイルシートからの新しい変更が自動的に反映されます。
私がしなければならなかったのは、大きなクラスを追加することだけでした。
だからうまくいけば、これはずっと簡単で、責任を分けていることが分かります。
だから、javascriptは、個々のプロパティを実際に手動で操作するのではなく、SSの特定の部分をオンまたはオフにすることです。
私たちは現在、Javascriptではなく、できるだけ小さなものを変更しています。
だから、もし私がそれを取り除きたいのであれば、クラスを持たないクラスはクラスを削除せず、私が言及した私の好きなものは、非常に便利なトグルです。
だから私が今トグルを打って打ち込んだ場合、クラスは割り当てられていないので、それをクラスの大きなものに割り当てます。
今はbigがすでに割り当てられているため、削除されます。
だから、これは明らかに巨大なフォントクラスでこのクレイジーオレンジを作るのには便利ではありませんが、ユーザーがそれをクリックできるようにするには、リストを行うなどの方法があります。
そして、それはそれを越えるでしょう。
しかし、彼らは再びクリックすることができますし、クロスオーバーしたり、正常に戻ったりします。
それが行われるだろう。
または、クラスを切り替えることでそれを行うことができますので、クラスと呼ばれるクラスを持つことができます。そして、クリックをもう一度クリックします。
削除されました。
これはトグルを使用する場合の1つの例です。
しかし、それは本当に本当に便利です。
クラスリストについて最後に述べるのは、それが技術的に配列ではないということです。
つまり、クラスを追加するには広告を使用する必要があります。
プッシュのようなことはできません。
ですから、それは技術的には配列ではないことを知っておくことが重要です。
そこで、javascriptを使用してスタイルを操作する2つの異なる方法について説明しました。
最初のものは一度に手動で1つのプロパティを手動で実行しています.1つか2つのことをしているのであれば正直です。
しかし、バッチでそれをやっているのであれば、それを複数の要素に分けてやっているのであれば、クラスを使用してクラスをオンまたはオフにする方が、