자바스크립트 offsetHeight 값 변경이 안됩니다.

Question

const draggables &#61; document.querySelectorAll('.draggable');let containers &#61; document.querySelectorAll('.box');let drag &#61; null;draggables.forEach(draggable &#61;> { draggable.addEventListener('dragstart',()&#61;>{ draggable.classList.add(&#34;dragging&#34;) drag &#61; draggable; }) draggable.addEventListener('dragend',()&#61;>{ draggable.classList.remove(&#34;dragging&#34;) })}); containers.forEach(container &#61;>{ container.addEventListener('dragover', (e) &#61;>{ e.preventDefault(); container.appendChild(drag) container.offsetHeight &#61;10; console.log(container.offsetHeight); console.dir(container) })})버튼 드래그 앤 드롭을 간단하게 구현하는 도중에 버튼을 다른 블록에 드래그 해서 옮길 때 버튼 부모요소 크기를 유동적으로 늘리기 위해 offset을 바꿔보려고 코드를 구현해봤습니다. 맨 아래 코드를 보시면 console.log로 offsetHeight 접근이 잘 되는건 확인했는데 값 변경이 안됩니다 ㅠㅠ 구글링해봐도 저렇게 값을 대입하던데 왜 값이 안변하는지 궁금합니다. (아무리 생각해봐도 css로 구현하는게 편할거같은데 자바스크립트로 구현하는게 맞는지도 궁금합니다. css로 구현하다 실패해서 자바스크립트로 해본거긴 합니다만..)

doooss · Accepted Answer

offsetHeight 는 읽기 전용 프로퍼티 입니다. 구글링에서 어떤 자료를 보셨는지 모르겠네요. 요소 크기 변경은 container.style.height 로 접근하는건 어떤가요? ref. mdn https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetHeight

자바스크립트 offsetHeight 값 변경이 안됩니다.

1개의 답변

Q&A 목록