ホームページ >ウェブフロントエンド >フロントエンドQ&A >クリックしてCSSを変更します
クリックしてCSSを変更します
- WBOYオリジナル
- 2023-05-27 12:00:37730ブラウズ
HTML および CSS プログラミングに慣れ親しんだ人の多くは、JavaScript を使用して Web ページを操作します。その中で、クリック イベントは最も一般的なインタラクション方法です。クリック イベントを通じて、要素のスタイル (CSS) を変更したり、特定の機能をトリガーしたりするなど、Web ページ内の要素を操作できます。次に、クリックイベントを通じて CSS を変更する方法を見てみましょう。
1. HTML と CSS の基礎知識
クリック イベントによって CSS がどのように変化するかを理解する前に、HTML と CSS の基礎知識を習得する必要があります。 HTML は主に Web ページを作成するために使用されるマークアップ言語であり、一連のタグ (タグ) で構成されます。タグは、テキスト、画像、リンクなど、Web ページ内のさまざまな要素をラップします。たとえば、次の HTML コード:
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>欢迎来到我的网页</h1>
</body>
</html>上記のコードでは、8b05045a5be5764f313ed5b9168a17e6 はファイル タイプを HTML として宣言し、100db36a723c770d327fc0aef2ce13b1 はファイル タイプをラップします。 Web ページ全体の場合、93f0f5c25f18dab9d176bd4f6de5d30e タグには、タイトル、スタイルなど、Web ページのメタデータが含まれます。 b2386ffb911b14667cb8f0f91ea547a7 タグは Web ページのタイトルを定義し、c9ccee2e6ea535a969eb3f532ad9fe89 タグは h1 要素のスタイル (フォントの色は赤) を定義します。 6c04bd5ca3fcae76e30b72ad730ca86d タグには、「私の Web ページへようこそ」というテキストを表示する 4a249f0d628e2318394fd9b75b4636b1 タグなど、Web ページのメイン コンテンツが含まれます。
CSS (Cascading Style Sheets) はスタイル シート言語であり、主に HTML 内のさまざまな要素のスタイルを定義および制御するために使用されます。 HTML ドキュメントの先頭にある c9ccee2e6ea535a969eb3f532ad9fe89 タグに CSS コードを記述することも、外部 CSS ファイルにスタイル コードを記述することもできます。上記のコードでは、内部スタイルを使用して h1 要素のフォントの色を定義しました。
2. クリック イベントの基礎知識
クリック イベントは、JavaScript で最も一般的に使用されるインタラクション メソッドの 1 つです。ユーザーが Web ページ上の要素をクリックすると、その要素は「クリック イベント」をトリガーし、JavaScript コードを記述することで要素を処理できます。以下は簡単なサンプル コードです。
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<style>
h1 {
color: red;
cursor: pointer;
}
</style>
<script>
function changeColor() {
document.getElementsByTagName("h1")[0].style.color = "blue";
}
</script>
</head>
<body>
<h1 onclick="changeColor()">点击我改变颜色</h1>
</body>
</html> 上記のコードでは、まず cursor: pointer スタイルを h1 要素に追加します。これにより、マウスが h1 要素上にあるときに、手の形に変わり、ユーザーに要素をクリックするよう促します。続いて、3f1c4e4b6b16bbbd69b2ee476dc4f83aタグ内に、h1要素の文字色を青色に変更する関数changeColor()を記述しました。最後に、onclick 属性が 4a249f0d628e2318394fd9b75b4636b1 タグに追加されます。この属性の値は、先ほど定義した changeColor() 関数であるため、 h1 要素の changeColor() 関数がトリガーされると、色を変更する機能が実現されます。
3. クリック イベントを通じて CSS を変更する
上記のサンプル コードを通じて、スタイルの変更など、JavaScript クリック イベントを通じて HTML 要素を操作できることがわかります。クリック イベントを通じて CSS を変更する別のコード例を次に示します。
<!DOCTYPE html>
<html>
<head>
<title>我的网页</title>
<style>
h1 {
color: red;
cursor: pointer;
}
.changeColor {
color: blue;
}
</style>
<script>
function addClass() {
document.getElementsByTagName("h1")[0].classList.add("changeColor");
}
function removeClass() {
document.getElementsByTagName("h1")[0].classList.remove("changeColor");
}
</script>
</head>
<body>
<h1 onclick="addClass()">点击变蓝</h1>
<h1 onclick="removeClass()">点击变红</h1>
</body>
</html> 上記のコードでは、まず 2 つのスタイルを定義します。1 つは h1 要素の初期スタイルで、もう 1 つは h1 要素がクリックされたときのスタイルです。後のスタイル。.changeColor は、h1 要素のスタイルを追加および削除するために使用されるクラス セレクターです。次に、2 つの関数 addClass() と removeClass() を定義しました。これらは、それぞれ h1 要素のスタイルを追加および削除するために使用されます。 6c04bd5ca3fcae76e30b72ad730ca86d タグに、2 つの h1 要素をそれぞれ追加し、addClass() と removeClass を onclick 属性 ()# にバインドしました。 ## 関数は、クリックして h1 要素のスタイルを変更する効果を実現します。
以上がクリックしてCSSを変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。