JavaScript만 사용하여 HTML 요소의 크기를 조정하려면 어떻게 해야 합니까?

순수 JavaScript를 사용하여 사용자 정의 가능한 HTML 요소 크기 조정

웹 개발자는 타사에 의존하지 않고 HTML 요소에 크기 조정 가능한 인터페이스를 제공해야 하는 경우가 많습니다. 도서관. 이 기사에서는 순수 JavaScript를 사용하여 이 기능을 구현하는 방법을 살펴봅니다.

HTML 요소를 크기 조정 가능하게 만들기 위해 이벤트 리스너를 연결하여 마우스 입력을 모니터링하고 이에 따라 요소의 크기를 조정할 수 있습니다. 이를 수행하는 코드는 다음과 같습니다.

var p = document.querySelector('p'); // Element to make resizable

p.addEventListener('click', function init() {
  p.removeEventListener('click', init, false);
  p.className = p.className + ' resizable';
  var resizer = document.createElement('div');
  resizer.className = 'resizer';
  p.appendChild(resizer);
  resizer.addEventListener('mousedown', initDrag, false);
}, false);

var startX, startY, startWidth, startHeight;

function initDrag(e) {
  startX = e.clientX;
  startY = e.clientY;
  startWidth = parseInt(window.getComputedStyle(p).width);
  startHeight = parseInt(window.getComputedStyle(p).height);
  document.addEventListener('mousemove', doDrag, false);
  document.addEventListener('mouseup', stopDrag, false);
}

function doDrag(e) {
  p.style.width = startWidth + e.clientX - startX + 'px';
  p.style.height = startHeight + e.clientY - startY + 'px';
}

function stopDrag(e) {
  document.removeEventListener('mousemove', doDrag, false);
  document.removeEventListener('mouseup', stopDrag, false);
}

사용법:

이 코드를 단락과 같은 원하는 HTML 요소에 적용하기만 하면 됩니다. (

):

<p>Resizable Text</p>

데모:

[데모 링크]

참고:

이 솔루션은 브라우저 간 호환성 문제가 있을 수 있다는 점을 명심하세요. 테스트를 거쳤으며 Firefox에서는 작동하지만 버전 9 이하의 IE에서는 작동하지 않습니다.

위 내용은 JavaScript만 사용하여 HTML 요소의 크기를 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!