Heim >Web-Frontend >CSS-Tutorial >Wie kann ich die Größe von HTML-Elementen nur mit Vanilla-JavaScript ändern?
Wie kann ich die Größe von HTML-Elementen nur mit Vanilla-JavaScript ändern?
- Mary-Kate OlsenOriginal
- 2024-12-08 07:51:15927Durchsuche
Anpassbare HTML-Elemente mit Vanilla-JavaScript erstellen
Die Aufgabe, HTML-Elemente wie
Tags, deren Größe beim Klicken geändert werden kann, können erreicht werden, ohne auf externe Bibliotheken wie jQuery angewiesen zu sein. So können Sie dies mit reinem JavaScript erreichen:
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);
}
Dieser Code fügt dem Zielelement eine „Resizable“-Klasse hinzu und hängt ein zusätzliches
Beachten Sie, dass diese Lösung möglicherweise nicht mit kompatibel ist alle Browser. Erwägen Sie für eine robustere Implementierung die Verwendung einer JavaScript-Bibliothek speziell für die Größenänderung von Elementen.
Das obige ist der detaillierte Inhalt vonWie kann ich die Größe von HTML-Elementen nur mit Vanilla-JavaScript ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!