바닐라 JavaScript만 사용하여 HTML 요소의 크기를 조정하려면 어떻게 해야 합니까?
- Mary-Kate Olsen원래의
- 2024-12-08 07:51:15937검색
바닐라 JavaScript를 사용하여 크기 조정 가능한 HTML 요소 만들기
와 같은 HTML 요소를 만드는 작업 또는
jQuery와 같은 외부 라이브러리에 의존하지 않고도 클릭 시 크기 조정이 가능한 태그를 얻을 수 있습니다. 순수 JavaScript를 사용하여 이 작업을 수행할 수 있는 방법은 다음과 같습니다.
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(document.defaultView.getComputedStyle(p).width, 10);
startHeight = parseInt(document.defaultView.getComputedStyle(p).height, 10);
document.documentElement.addEventListener('mousemove', doDrag, false);
document.documentElement.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.documentElement.removeEventListener('mousemove', doDrag, false);
document.documentElement.removeEventListener('mouseup', stopDrag, false);
}
이 코드는 대상 요소에 '크기 조정 가능' 클래스를 추가하고
요소에 'resizer' 클래스를 사용합니다. '리사이저'를 클릭하면 마우스 드래그 앤 드롭 이벤트가 캡처되어 마우스 움직임에 따라 대상 요소의 너비와 높이가 동적으로 조정됩니다.
이 솔루션은 다음과 호환되지 않을 수 있습니다. 모든 브라우저. 보다 강력한 구현을 위해서는 요소 크기 조정 전용 JavaScript 라이브러리를 사용하는 것이 좋습니다.
위 내용은 바닐라 JavaScript만 사용하여 HTML 요소의 크기를 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.