Wie kann ich die Größe von HTML-Elementen nur mit Vanilla-JavaScript ändern?-CSS-Tutorial-php.cn

Wie kann ich die Größe von HTML-Elementen nur mit Vanilla-JavaScript ändern?

Mary-Kate Olsen

Freigeben： 2024-12-08 07:51:15

Original

935 Leute haben es durchsucht

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

Anpassbare HTML-Elemente mit Vanilla-JavaScript erstellen

Die Aufgabe, HTML-Elemente wie

oder

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);
}

Nach dem Login kopieren

Dieser Code fügt dem Zielelement eine „Resizable“-Klasse hinzu und hängt ein zusätzliches

an. mit der Klasse 'resizer' zum Element. Wenn auf „Resizer“ geklickt wird, werden die Drag-and-Drop-Ereignisse der Maus erfasst, um die Breite und Höhe des Zielelements basierend auf den Mausbewegungen dynamisch anzupassen.

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!

Quelle：php.cn

Vorheriger Artikel：Warum hat meine SVG-Datei in einem Div zusätzlichen Platz darunter und wie kann ich das beheben? Nächster Artikel：Wie zentriere ich ein Markenlogo in einer Bootstrap 3-Navigationsleiste?

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2240

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2380

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1990

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...