Vanilla JavaScript のみを使用して HTML 要素のサイズを変更できるようにするにはどうすればよいですか?-CSSチュートリアル-php.cn

Vanilla JavaScript のみを使用して HTML 要素のサイズを変更できるようにするにはどうすればよいですか?

Mary-Kate Olsen

リリース： 2024-12-08 07:51:15

オリジナル

922 人が閲覧しました

How Can I Make HTML Elements Resizable Using Only Vanilla JavaScript?

バニラ 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 ライブラリの使用を検討してください。

以上がVanilla JavaScript のみを使用して HTML 要素のサイズを変更できるようにするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：私の SVG の Div の下に余分なスペースがあるのはなぜですか? それを修正するにはどうすればよいですか? 次の記事：Bootstrap 3 Navbar の中央にブランドロゴを配置するにはどうすればよいですか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事