Evento di ridimensionamento della finestra in JavaScript
-
Aggiungi un evento di ridimensionamento utilizzando la funzione
addEventListener()in JavaScript -
Aggiungi un evento di ridimensionamento utilizzando la funzione
onresize()in JavaScript
Questo tutorial discuterà l’aggiunta di un evento di ridimensionamento utilizzando le funzioni addEventListener() e onresize() in JavaScript.
Aggiungi un evento di ridimensionamento utilizzando la funzione addEventListener() in JavaScript
Per aggiungere un evento di ridimensionamento alla finestra, possiamo utilizzare la funzione addEventListener() in JavaScript. Questa funzione aggiunge un evento che contiene una funzione a un oggetto. Ad esempio, aggiungiamo un evento alla finestra dell’oggetto per ottenere la sua larghezza e altezza e mostrarlo nella pagina web. Vedi il codice qui sotto.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span>Width = </span><span id="SpanID1"></span>
<br />
<span>Height = </span><span id="SpanID2"></span>
<script type="text/javascript">
start();
window.addEventListener('resize', start);
function start(){
document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;
document.getElementById('SpanID2').innerText = document.documentElement.clientHeight;
}
</script>
</body>
</html>
Produzione:
Width = 798
Height = 779
Nel codice sopra, abbiamo aggiunto uno span con il testo Width=, e successivamente abbiamo aggiunto uno span vuoto con un id SpanID1 nella sezione body. Abbiamo aggiunto un tag br per spostare il cursore su una nuova riga e, sulla nuova riga, abbiamo aggiunto un altro span con il testo Height=, e successivamente abbiamo aggiunto un altro span vuoto con un id SpanID2.
L’id dello span verrà utilizzato per ottenere l’elemento in JavaScript. Nel tag script abbiamo una funzione start(), che serve per cambiare il testo delle due span con la larghezza e l’altezza della finestra. Dopo la funzione start(), abbiamo aggiunto l’evento di ridimensionamento, che chiamerà la funzione start() quando un utente ridimensiona la finestra. La larghezza e l’altezza della finestra verranno mostrate sulla pagina e cambieranno al variare delle dimensioni della finestra. Puoi salvare il codice sopra in un file HTML e aprirlo con qualsiasi browser e modificarne le dimensioni per vedere se il codice funziona o meno. Puoi anche usare la funzione addEventListener() per aggiungere un evento a qualsiasi oggetto, come una casella di controllo.
Aggiungi un evento di ridimensionamento utilizzando la funzione onresize() in JavaScript
Per aggiungere un evento di ridimensionamento alla finestra, possiamo usare la funzione onresize() in JavaScript. Questa funzione viene utilizzata per specificare cosa accadrà se la dimensione di una finestra viene modificata. Ad esempio, aggiungiamo un evento alla finestra dell’oggetto per ottenere la sua larghezza e altezza e mostrarlo nella pagina web. Vedi il codice qui sotto.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<span>Width = </span><span id="SpanID1"></span>
<br />
<span>Height = </span><span id="SpanID2"></span>
<script type="text/javascript">
start();
window.onresize = start;
function start(){
document.getElementById('SpanID1').innerText = document.documentElement.clientWidth;
document.getElementById('SpanID2').innerText = document.documentElement.clientHeight;
}
</script>
</body>
</html>
Produzione:
Width = 798
Height = 779
Nel codice sopra, la funzione start() verrà chiamata se la dimensione della finestra viene modificata. Come puoi vedere, l’output è lo stesso del metodo sopra.
