javascript Color Picker 만들기

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

이미지 썸네일 삭제

<input type="color"> - HTML: HyperText Markup Language | MDN

<input> elements of type color provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in #rrggbb hexadecimal format.

developer.mozilla.org

• 오른쪽 정렬오른쪽 정렬왼쪽 정렬왼쪽 정렬가운데 정렬가운데 정렬
•  
• 삭제삭제

1. HTML에서 제공하는 Color Picker를 넣어준다.

<div class="box">
 <span class="editor-btn icon" title="Color Picker">
  <input title="Color Picker" type="color" id="color">
 </span>
</div>

 

2. querySelector를 이용하여 선택 영역에 span tag를 통해 색깔을 넣어준다.

let colorInput = document.querySelector('#color');
colorInput.addEventListener('input', () =>{
    let color = colorInput.value;
    let spanTag = document.createElement('span');
    spanTag.style = "color: "+color;
    window.getSelection().getRangeAt(0).surroundContents(spanTag);
});