ホームページ > 記事 > ウェブフロントエンド > ボタンクリック色切り替え機能のJS実装サンプル共有
ボタンクリック色切り替え機能のJS実装サンプル共有
- 小云云オリジナル
- 2018-01-09 10:37:512835ブラウズ
この記事では、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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。