CSS チュートリアル (8) CSS と JS を組み合わせた使い方の簡単な紹介

8. JS と組み合わせた CSS の使用法を簡単に紹介します (イベント アクション用)

JavaScript で CSS を使用すると、多くの優れた動的ページ効果を作成できます。このチュートリアルの最後に、CSS のアプリケーションを簡単に紹介します。 JS。まず、イベントとアクションの概念を理解する必要があります。クライアント側スクリプトでは、JavaScript はイベントに応答することでユーザーとの対話を取得します。たとえば、ユーザーがボタンをクリックするか、特定のテキスト上でマウスを移動すると、クリック イベントまたはマウス移動イベントがトリガーされ、これらのイベントに応答することで、特定の機能を完了できます (たとえば、ボタンをクリックしてポップアップを表示します)。ダイアログ ボックス、マウスをその上に移動するとテキストの色が変わりますなど)。 以下にいくつかの一般的なイベントを示します (さらに多くのイベントが使用されています。関連情報を確認してください):

onClick: マウス クリック イベント。 (マウスが押されてから離されたときを指します。)

onDblClick: マウスのダブルクリック イベント。 (マウスを素早く押して放し、もう一度押したときを指します。)

onMouseDown: マウスプレスイベント。 (マウスが押されたときに生成されます。)

onMouseUp: マウスリリースイベント。 (マウスが押された状態から跳ね返された状態までを指します。)

onMouseMove: マウス移動イベント。 (特定の要素上でマウスを移動することを指します。) onMouseOver: マウスオーバーイベント。 (ポインターが外界から要素に移動したときに発生することを意味します。)

onMouseOut: マウスがイベントを離れる。 (マウスが特定の要素から離れると発生します。)

onLoad: ロードイベント。 (画像またはページの読み込みが終了すると発生します。)

onUnload: アンロード イベント。 (訪問者がページを離れるときに発生します。)

onScroll: スクロール バーのスクロール イベント。 (訪問者がスクロールを使用して上下に移動すると発生します。)

イベントを取得したら、イベントにアクションを追加します。ここでは、現在の要素のカスタム スタイルを変更するアクションについてのみ説明します。このメソッドを使用して、最初に 2 つのカスタム CSS スタイルを設定し、マウス イベントが発生すると、そのオブジェクトが適用されます。 2 番目の CSS スタイルと生成されるマウス効果については、以下の例を参照してください。

Web ページに画像を挿入し、「.out」スタイルをカスタマイズし、グレーのフィルターを使用して画像を白黒にします。

このカスタム スタイルを画像に適用し、ブラウザで画像をプレビューします。は白黒になり、別のスタイル「.over」を定義します。このスタイルはコンテンツを持たず、空のスタイルです。



次に、「onMouseOver="this.className='over'」を画像タグ (IMG) "onMouseOut="this.className='out'"" は、マウスがその上を通過すると画像がオーバー スタイルになることを意味します。つまり、マウスが離れると画像は通常のカラー画像になります。アウトスタイル、つまり白黒のイメージで。 oMouseOver と onMouseOut はマウス イベントです。this.className="..." は、現在のオブジェクトのクラス名が...であることを意味します。JS は大文字と小文字を区別します。

保存後、画像は白黒になりますが、マウスを離すと画像は黒に戻ります。白。想像力を働かせれば、this.className メソッドを使用して多くの美しいマウス効果を作成することもできます。

以上がCSS チュートリアル (8) CSS と JS を組み合わせた使い方の簡単な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。