ボタンクリック色切り替え機能のJS実装サンプル共有
この記事では、JS で実装されたボタンのクリック色の切り替え機能を主に紹介し、JS のマウス イベント応答とページ要素属性の動的操作に関する実装テクニックを必要としている友人が参考になれば幸いです。
最初に実行中のエフェクトを見てみましょう:
具体的なコードは次のとおりです:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>www.jb51.net 点击切换按钮颜色</title>
</head>
<body>
<button id="btn1" onclick="btn(1)">按钮1</button>
<button id="btn2" onclick="btn(2)">按钮2</button>
<button id="btn3" onclick="btn(3)">按钮3</button>
<script>
//设置背景颜色
//如果设置参数函数会节省函数数量吧
//设置flag+参数函数
flag = "btn1";
function btn1(){
document.getElementById("btn2").style.color = "black";
document.getElementById("btn3").style.color = "black";
document.getElementById("btn1").style.color = "red";
}
function btn2(){
document.getElementById("btn1").style.color = "black";
document.getElementById("btn2").style.color = "red";
document.getElementById("btn3").style.color = "black";
}
function btn3(){
document.getElementById("btn1").style.color = "black";
document.getElementById("btn2").style.color = "black";
document.getElementById("btn3").style.color = "red";
}
function btn(num){
if(num == 1){
document.getElementById(flag).style.color = "black";
document.getElementById(flag).style.backgroundColor = "white";
document.getElementById("btn1").style.color = "red";
document.getElementById("btn1").style.backgroundColor = "blue";
flag = "btn1";
}
if(num == 2){
document.getElementById(flag).style.color = "black";
document.getElementById(flag).style.backgroundColor = "white";
document.getElementById("btn2").style.color = "red";
document.getElementById("btn2").style.backgroundColor = "blue";
flag = "btn2";
}
if(num == 3){
document.getElementById(flag).style.color = "black";
document.getElementById(flag).style.backgroundColor = "white";
document.getElementById("btn3").style.color = "red";
document.getElementById("btn3").style.backgroundColor = "blue";
flag = "btn3";
}
}
</script>
</body>
</html>関連推奨事項:
JS ボタンの色切り替えエフェクトの実装例
WeChat アプレットは、次の機能を実現します。ボタンをクリックしてフォントの色を変更します
JSを使用して、ボタンをクリックした後に画像を自動的に切り替える簡単な方法を実装します
以上がボタンクリック色切り替え機能のJS実装サンプル共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7470
15
1377
52
77
11
19
29
Xiaomi Mi 14Ultraで4gと5gを切り替えるにはどうすればよいですか?
Feb 23, 2024 am 11:49 AM
Xiaomi 14Ultraは、今年最も人気のあるXiaomiモデルの1つです.Xiaomi 14Ultraは、プロセッサとさまざまな構成をアップグレードするだけでなく、多くの新しい機能アプリケーションをユーザーにもたらします.これは、Xiaomi 14Ultra携帯電話の販売からもわかります.人気がありますが、まだ知られていない一般的に使用される機能がいくつかあります。では、Xiaomi 14Ultraはどのようにして4gと5gを切り替えるのでしょうか？以下に具体的な内容をご紹介していきます！ Xiaomi 14Ultraで4gと5gを切り替えるにはどうすればよいですか? 1. 電話機の設定メニューを開きます。 2. 設定メニューで「ネットワーク」および「モバイル ネットワーク」オプションを見つけて選択します。 3. モバイル ネットワーク設定に、[優先ネットワーク タイプ] オプションが表示されます。 4. このオプションをクリックまたは選択すると、次の内容が表示されます。
win11 home版からprofessional版へ切り替える操作チュートリアル_win11 home版からprofessional版へ切り替える操作チュートリアル
Mar 20, 2024 pm 01:58 PM
Win11 Home Edition を Win11 Professional Edition に変換するにはどうすればよいですか? Win11 システムは Home Edition、Professional Edition、Enterprise Edition などに分かれており、ほとんどの Win11 ノートブックには Win11 Home Edition システムがプリインストールされています。今日は、エディターが win11 ホーム バージョンからプロフェッショナル バージョンに切り替える手順を示します! 1. まず、win11 デスクトップとプロパティでこのコンピューターを右クリックします。 2. 「プロダクト キーの変更」または「Windows のアップグレード」をクリックします。 3. 入力後、「プロダクト キーの変更」をクリックします。 4. アクティベーション キー 8G7XN-V7YWC-W8RPC-V73KB-YWRDB を入力し、[次へ] を選択します。 5.その後、成功を促すメッセージが表示されるので、win11 home バージョンを win11 professional バージョンにアップグレードできます。
Win10システムでデュアルシステム切り替えを実装する方法
Jan 03, 2024 pm 05:41 PM
Win システムに初めて触れたとき、多くの友人は慣れていないかもしれません。コンピューターにはデュアル システムがあります。現時点では、実際に 2 つのシステムを切り替えることができます。切り替えの詳細な手順を見てみましょう。 2 つのシステム間で。 win10システムで2つのシステムを切り替える方法 1. ショートカットキーの切り替え 1. 「win」+「R」キーを押してファイル名を指定して実行を開きます 2. 実行ボックスに「msconfig」と入力し、「OK」をクリックします 3. 開いた「」で「システム構成」インターフェイスで、必要なシステムを選択し、「デフォルトとして設定」をクリックします。完了後、「再起動」で切り替えを完了できます。方法 2. 起動時に切り替えを選択します。 1. デュアル システムの場合、選択操作インターフェイス起動時に表示されます。キーボードの「上下キー」を使用してシステムを選択できます。
Apple コンピュータのデュアル システム ブート モードを切り替える
Feb 19, 2024 pm 06:50 PM
起動時に Apple デュアル システムを切り替える方法 Apple コンピュータは強力なデバイスなので、独自の macOS オペレーティング システムに加えて、Windows などの他のオペレーティング システムをインストールしてデュアル システム切り替えを実現することもできます。では、起動時に 2 つのシステムを切り替えるにはどうすればよいでしょうか?この記事では、Apple コンピュータのデュアル システムを切り替える方法を紹介します。まず、デュアル システムをインストールする前に、Apple コンピュータがデュアル システムの切り替えをサポートしているかどうかを確認する必要があります。一般的に言えば、Apple コンピュータは以下に基づいています。
Excelでブックを切り替えるショートカットキーの使い方
Mar 20, 2024 pm 01:50 PM
Excel ソフトウェアのアプリケーションでは、一部の操作を簡単かつ迅速に行うためにショートカット キーを使用することに慣れています。Excel の複数のテーブル間に関連するデータがある場合があります。それを表示するときに、タスクを常に切り替える必要があります。高速な切り替え方法を使用すると、切り替えにかかる無駄な時間が大幅に節約され、作業効率が大幅に向上します。クイック切り替えを完了するにはどのような方法を使用できますか? この問題に対処するために、今日は編集者がそれについてお話します。内容は次のとおりです。 Excel でブックを切り替えるショートカット キーを使用します。 1. まず、開いた Excel テーブルの下部に複数のワークブックが表示されますが、下の図に示すように、異なるワークブックをすばやく切り替える必要があります。 2. 次に、キーボードの Ctrl キーを動かさずに押し、必要に応じて右側のジョブを選択します。
Windows 10のタスクバーの色を変更する方法
Jan 01, 2024 pm 09:05 PM
Windows 10 でタスク バーの色を変更するのは非常に簡単ですが、多くのユーザーは設定できないことに気づきました。実際、それは非常に簡単です。コンピューターの個人用設定で好みの色を選択するだけです。色を変更できない場合は、細かい設定にも注目してください。 Win10 タスクバーの色を変更する方法 ステップ 1: デスクトップを右クリックし、[個人設定] をクリックします。 ステップ 2: カラー領域をカスタマイズします。 ステップ 3: 好きな色を選択します。 PS: 色を変更できない場合は、[色] -> [色] をクリックします。 [色] -> [カスタマイズ] -> [デフォルトのウィンドウ モード] を選択し、暗い色を選択します。
WPSドキュメントテーブルの色の設定方法をご存知ですか？
Mar 20, 2024 am 08:19 AM
他の人の WPS ドキュメントのテーブル カラーを見ると、効果はカラフルで美しいですが、私たちは単調な黒しかありません。表を色で埋めなければならない場合、多くの学生がそうするでしょう。しかし、WPS ドキュメント China でテーブルの色を設定したい場合、多くの学生は間違いなく混乱するでしょう。今日は、WPS ドキュメントテーブルの色の設定方法を学びましょう。皆様のお役に立てればと思い、資料を作成させていただきました。手順は次のとおりです。 1. WPS ドキュメント内に表を描画し、線の色を変更する表を右クリックする必要があります。 2. 次に、表上でマウスを右クリックし、ポップアップメニューに「枠線と網かけ」が表示されます。 3. このとき、[境界線と網かけ]オプションが開きます。
Vivo の新しい X100 シリーズ メモリ、カラー露出: すべてのシリーズは 12+256GB から始まります
May 06, 2024 pm 03:58 PM
5月6日のニュースによると、vivoは本日、新しいvivoX100シリーズが5月13日19時に正式にリリースされると正式に発表しました。このカンファレンスでは、vivoX100s、vivoX100sPro、vivoX100Ultraの3モデルと、vivoの自社開発イメージングブランドBlueImageブループリントイメージング技術が発表される予定であることがわかった。デジタルブロガー「Digital Chat Station」も本日、これら3モデルの公式レンダリング、メモリ仕様、カラーマッチングを公開しており、このうちX100sはストレートスクリーンデザインを採用しているのに対し、X100sProとX100Ultraは曲面スクリーンデザインを採用している。ブロガーは、vivoX100s にはブラック、チタン、シアン、ホワイトの 4 つの色があることを明らかにしました。 メモリの仕様。
