[JavaScript] 자바스크립트에서 색상 선택 정보변경 확인하기
2022. 7. 15. 20:01ㆍProgram/JavaScript
170_자바스크립트에서 색상 선택 정보변경 확인하기
[적용]
- 컬러 피커 상태 변경 시 작업을 처리하고 싶을 때
[문법]
| 이벤트 | 의미 |
| change | input 요소 변경 시 이벤트 |
[내용]
컬러 피커 요소의 상태 변경은 change 이벤트로 감시할 수 있다.
addEventListener()를 사용해 이벤트 핸들러를 설정한다.
이벤트 핸들러 내부 함수는 앞서 기술한 색상 선택 정보 읽어오기 방법을 사용한다.
https://stonefree.tistory.com/356
[JavaScript] 자바스크립트에서 색상 선택 정보 읽어오기
169_자바스크립트에서 색상 선택 정보 읽어오기 [적용] 컬러 피커(Color Picker)의 선택된 색을 확인하고 싶을 때 컬러 피커의 선택된 색을 변경하고 싶을 때 [문법] 속성 의미 타입 input요소.value 컬퍼
stonefree.tistory.com
HTML index.html
<body>
<input type="color" id="myColor" />
<p class="log"></p>
</body>JavaScript main.js
const cbA = document.querySelector('#myColor');
cbA.addEventListener('change', (event) => {
// 선택된 색상 확인하기
const value = event.target.value;
// 화면에 표시
const log = `${value} 색상이 선택되었습니다.`;
const logEl = document.querySelector('.log');
logEl.innerHTML = log;
logEl.style.backgroundColor = value;
});
실행결과
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 폼 전송하기 (0) | 2022.07.16 |
|---|---|
| [JavaScript] 자바스크립트 풀다운(Pull-down) 메뉴 사용하기 (0) | 2022.07.16 |
| [JavaScript] 자바스크립트에서 색상 선택 정보 읽어오기 (0) | 2022.07.15 |
| [JavaScript] 자바스크립트에서 슬라이더 값 변경 확인하기 (0) | 2022.07.15 |
| [JavaScript] 자바스크립트에서 슬라이더 값 읽어 오기 (0) | 2022.07.15 |