element

[JS] Element 크기 변화 감지 (ResizeObserver)

window창은 resize 이벤트를 이용해서 창 크기 변화를 감지할 수 있습니다. 하지만 div, p와 같은 HTML 태그들은 resize 이벤트에 해당하지 않습니다. ResizeObserver API const $target = document.querySelector('div'); const observer = new ResizeObserver((entries) => { // 관찰 중인 배열 형식의 객체 리스트 entries.forEach((entry) => { ... }); }); // 크기변화를 관찰할 요소지정 observer.observe($target); Resize Observer API는 resize 이벤트와 다르게 설정한 요소의 크기 변화를 관찰하며, 크기가 변경될 때마다 관찰자에게 정..

[JS] select에서 선택한 값 가져오기

코드 빨강색 노랑색 초록색 const changeValue = (target) => { // 선택한 option의 value 값 console.log(target.value); // option의 text 값 console.log(target.options[target.selectedIndex].text); } 코드 설명 See the Pen select 선택한 값 by bolgang13 (@bolgang13) on CodePen. select 요소에서 value 키워드로 접근, value 값을 가져올 수 있습니다. 선택한 text 값은 해당 select 요소에서 현재 선택한 option의 인덱스 값으로 가져올 수 있고, 해당 값에서 option 목록을 지정해 해당 text 값을 가져올 수 있습니다.