【초보자라도 알 수 있다】 단 한 줄로 컬러 피커를 구현
아무래도 7note입니다. 1행으로 만드는 컬러 피커(※IE 비대응)
HTML에서는 컬러 피커를 단 한 줄로 만들 수 있습니다!
index.html<input type="color" value="#ffffff">
조금 이해하기 어려울지도 모릅니다만, 왼쪽 상단의 작은 버튼다운 사각형을 클릭하면, 컬러 피커를 표시할 수 있습니다.
응용편 : 컬러 피커의 값을 얻고 웹 사이트의 배경색을 변경합니다.
index.html<input type="color" value="#ff0000" id="colorpicker">
script.js// カラーピッカーを変数に格納
var picker = document.getElementById("colorpicker");
// 値が変更された時、背景色を変更する
picker.addEventListener('change', (event) => {
var inputValue = picker.value;
document.body.style.backgroundColor = inputValue ;
});
요약
좀처럼 사용할 기회는 적을지도 모릅니다만, 기억해 두면 어딘가에서 사용할 수 있을지도 모릅니다.
간단하게 작성하고 재미 있었기 때문에 이것을 사용하여 뭔가 재미있는 것을 만들고 싶네요.
어머니!
~ Qiita에서 매일 게시 중!! ~
【초보자용】WEB 제작의 조금 테크 모임
Reference
이 문제에 관하여(【초보자라도 알 수 있다】 단 한 줄로 컬러 피커를 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/7note/items/7f1fdef09abffac78fd9
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<input type="color" value="#ffffff">
<input type="color" value="#ff0000" id="colorpicker">
// カラーピッカーを変数に格納
var picker = document.getElementById("colorpicker");
// 値が変更された時、背景色を変更する
picker.addEventListener('change', (event) => {
var inputValue = picker.value;
document.body.style.backgroundColor = inputValue ;
});
Reference
이 문제에 관하여(【초보자라도 알 수 있다】 단 한 줄로 컬러 피커를 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/7note/items/7f1fdef09abffac78fd9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
