使用純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中文網其他相關文章！
