Heim > Artikel > Web-Frontend > JS-Implementierung der Beispielfreigabe der Schaltflächenklick-Farbumschaltfunktion

JS-Implementierung der Beispielfreigabe der Schaltflächenklick-Farbumschaltfunktion

小云云Original: 2018-01-09 10:37:512835Durchsuche

In diesem Artikel wird hauptsächlich die von JS implementierte Schaltflächenklick-Farbwechselfunktion vorgestellt, die die Reaktion auf JS-Mausereignisse und die dynamische Bedienung von Seitenelementattributen im Zusammenhang mit Implementierungstechniken umfasst. Freunde in Not können sich darauf beziehen. Ich hoffe, es kann allen helfen.

Werfen wir zunächst einen Blick auf den Laufeffekt:

Der spezifische Code lautet wie folgt:

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

WeChat-Applet implementiert die Funktion des Klickens auf die Schaltfläche, um die Schriftfarbe zu ändern

Verwendung von JS zur Implementierung der Klickschaltfläche Eine einfache Möglichkeit, Bilder anschließend automatisch zu wechseln

Das obige ist der detaillierte Inhalt vonJS-Implementierung der Beispielfreigabe der Schaltflächenklick-Farbumschaltfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Implementierungsmethode der AngularJS-FormularvalidierungsfunktionNächster Artikel：Implementierungsmethode der AngularJS-Formularvalidierungsfunktion

In Verbindung stehende Artikel

Mehr sehen