[JavaScript] 자바스크립트에서 색상 선택 정보 읽어오기
2022. 7. 15. 19:51ㆍProgram/JavaScript
169_자바스크립트에서 색상 선택 정보 읽어오기
[적용]
- 컬러 피커(Color Picker)의 선택된 색을 확인하고 싶을 때
- 컬러 피커의 선택된 색을 변경하고 싶을 때
[문법]
| 속성 | 의미 | 타입 |
| input요소.value | 컬퍼 피커의 선택된 색 | 문자열 |
* input 요소는 <input type="color" />
[내용]
input 요소의 type 속성을 color로 설정하면 컬러 피커(Color Picker) 폼이 표시된다.
컬러 피커 폼은 유저로부터 임의의 색상을 입력받는다.
자바스크립트는 value 속성으로 요소를 참조하여 데이터 값을 확인할 수 있으며, value 속서은 문자열(String) 이다.
HTML index.html
<body>
<input type="color" id="myColor" value="#ff0000" />
</body>JavaScript main.js
const element = document.querySelector('#myColor');
const value = element.vlaue;
console.log(value); // 결과: '#ff0000'실행결과
value 속성에 문자열을 대입하여 값을 변경하면 컬러 피커가 지정된 색으로 변경된다.
const element = document.querySelector('#myColor');
element.value = '#00ff00';
const value = element.vlaue;
console.log(value); // 결과: '#00ff00'실행결과
참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
| [JavaScript] 자바스크립트 풀다운(Pull-down) 메뉴 사용하기 (0) | 2022.07.16 |
|---|---|
| [JavaScript] 자바스크립트에서 색상 선택 정보변경 확인하기 (0) | 2022.07.15 |
| [JavaScript] 자바스크립트에서 슬라이더 값 변경 확인하기 (0) | 2022.07.15 |
| [JavaScript] 자바스크립트에서 슬라이더 값 읽어 오기 (0) | 2022.07.15 |
| [JavaScript] 자바스크립트에서 드롭다운 메뉴값 변경 확인하기 (1) | 2022.07.15 |