[책] 자바스크립트 코드 레시피 278 - 156일차

색상 선택 정보 읽어 오기

• 컬러 피커(Color Picker)의 선택된 색을 확인하고 싶을 때
• 컬러 피커의 선택된 색을 변경하고 싶을 때

구문

input.요소.value

설명

input 요소의 type 속성을 color로 설정하면 컬러 피커 폼이 표시됩니다. 컬러 피커 폼은 유저로부터 임의의 색상을 입력받습니다. 자바스크립트는 value 속성으로 요소를 참조하여 데이터 값을 확인할 수 있으며, value 속성은 문자열입니다.

실습

index.html

<input type="color" id="myColor" value="#ff0000">

---

script.js

const element = document.querySelector('#myColor');
const value = element.value;
console.log(value);
// RGB 출력
element.addEventListener('input', (event) => {
  console.log(event.target.value);
});