버튼 클릭 색상 전환 기능의 JS 구현 예제 공유-JS 튜토리얼-php.cn

버튼 클릭 색상 전환 기능의 JS 구현 예제 공유

小云云

풀어 주다： 2018-01-09 10:37:51

원래의

2833명이 탐색했습니다.

이 글에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!