순수 JavaScript만 사용하여 크기 조정 가능한 HTML 요소를 어떻게 만들 수 있습니까?

순수 JavaScript로 크기 조정 가능한 HTML 요소 생성

문제:

HTML을 어떻게 만들 수 있나요?

또는

순수 JavaScript만 사용하여 클릭 시 크기를 조정할 수 있습니까?

해결책:

HTML 요소를 크기 조정 가능하게 만들기 위해 해당 크기를 조작하는 사용자 정의 크기 조정 도구를 만들 수 있습니다.

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

// Initialize resizing on click
p.addEventListener('click', function() {

    // Remove click event listener and append resizer
    p.removeEventListener('click', init, false);
    p.className += ' resizable';

    var resizer = document.createElement('div');
    resizer.className = 'resizer';
    p.appendChild(resizer);

    // Attach mouse event listeners for resizing
    resizer.addEventListener('mousedown', initDrag, false);
});

크기 조정 기능:

마우스 움직임을 추적하고 요소 크기를 조정합니다.

// Store initial values and mouse coordinates
var startX, startY, startWidth, startHeight;

function initDrag(e) {
    startX = e.clientX;
    startY = e.clientY;
    startWidth = parseInt(window.getComputedStyle(p).width, 10);
    startHeight = parseInt(window.getComputedStyle(p).height, 10);
    
    // Listen for mouse movement and update element's dimensions
    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) {
    // Remove mouse event listeners
    document.documentElement.removeEventListener('mousemove', doDrag, false);
    document.documentElement.removeEventListener('mouseup', stopDrag, false);
}

위 내용은 순수 JavaScript만 사용하여 크기 조정 가능한 HTML 요소를 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript html using

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.