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

純粋な JavaScript を使用したカスタマイズ可能な HTML 要素のサイズ変更

多くの場合、Web 開発者はサードパーティに依存せずに 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 中国語 Web サイトの他の関連記事を参照してください。