Implémentation JS du partage d'exemples de fonction de changement de couleur par clic sur un bouton-js tutoriel-php.cn

Implémentation JS du partage d'exemples de fonction de changement de couleur par clic sur un bouton

小云云

Libérer： 2018-01-09 10:37:51

original

2881 Les gens l'ont consulté

Cet article présente principalement la fonction de changement de couleur du clic implémentée par JS, impliquant la réponse aux événements de la souris js et le fonctionnement dynamique des techniques d'implémentation liées aux attributs des éléments de page. Les amis dans le besoin peuvent s'y référer, j'espère que cela pourra aider tout le monde.

Jetons d'abord un coup d'œil à l'effet de course :

Le code spécifique est le suivant :

<!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>

Copier après la connexion

Recommandations associées :
Exemple d'implémentation de l'effet de changement de couleur du bouton JS

L'applet WeChat implémente la fonction de cliquer sur le bouton pour modifier la couleur de la police

Utiliser JS pour implémenter le bouton de clic Un moyen simple de changer automatiquement d'image par la suite

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!