[JS] 버튼누르면 헥사코드색상으로 변경 하기

카테고리 없음

by 2hansoul 2022. 6. 15. 19:02

간단한 js 예제

<!DOCTYPE html>
<!-- saved from url=(0126)https://learn.hansung.ac.kr/bbcswebdav/pid-157811-dt-content-rid-328913_1/courses/20171AIT0003A/WP_Final_2016_Prob%281%29.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf8">
    
    <script>
      function myText(x) {
        var x = document.getElementById("color").value;
        //console.log(x);
        document.getElementById('textColor').style.color =x;
      } 
      function myBackground(x) {
        var x = document.getElementById('color1').value;
        console.log(x);
        document.getElementById('bgColor').style.backgroundColor= x;
     
      } 

</scirpt>



   <b> (3) </b>
      <div id="testArea" style="width:100; height:60; border:1px solid;">
        <b> <b id="textColor">Select Text Color</b>
        <input id="color" name="color" onchange="myText(this)" type="color"> :
        <span id=""> </span> <br>
         <b id="bgColor"> Select Background Color</b>
        <input id="color1" name="color1" onchange="myBackground(this)" type="color"> :
        <span ></span> <br>
        </b>
      </div>

헥사코드를 누를 시 색상을 그거에 맞게 변경 할수 있다